css3旋转相册

效果图

 

 步骤

1.需要在文件跟目录下新建img文件夹，添加对应图片；

2.新建index.html,复制下面代码

<html>
<head>
  <meta charset="utf-8">
  <title>旋转相册</title>
<style>
    body {
      width: 100%;
      margin: 0;
      overflow: hidden;
      background: hsla(0, 5%, 5%, 1);
      background-repeat: no-repeat;
      background-attachment: fixed;
      background-image: linear-gradient(to right top, hsla(0, 5%, 15%, 0.5), hsla(0, 5%, 5%, 1));
      background-image: -moz-linear-gradient(to right top, hsla(0, 5%, 15%, 0.5), hsla(0, 5%, 5%, 1));
    }
    *,html,body{
        margin: 0;
        padding: 0;
        width: 100%;
        height: 100%;
    }
    .page{
        width: 100%;
        height: 100%;
        overflow: hidden;
        position: relative;
        /* background:  radial-gradient(circle farthest-side at left top, #60aeff, #4b6ae9) */
    }
    .content{
        width: 200px;
        height: 200px;
        margin: 360px auto;
        transform-style: preserve-3d;
        transform: rotateY(20deg);
        animation:rotate 5s infinite;
        animation-timing-function: linear;
    }
    .content>div{
        width: 200px;
        height: 200px;
        position:absolute;
        border: 1px solid #ccc;
    }
    .content>.inDiv{
        width: 100px;
        height: 100px;
        top: 50px;
        left: 50px;
    }
    .content .front{
        transform: translateZ(200px);
    }
    .content .back{
        transform: translateZ(-200px);
    }
    .content .top{
        transform: rotateX(90deg) translateZ(200px);
    }
    .content .bottom{
        transform: rotateX(-90deg) translateZ(200px);
    }
    .content .left{
        transform: rotateY(90deg) translateZ(200px);
    }
    .content .right{
        transform: rotateY(-90deg) translateZ(200px);
    }

    .content .inFront{
        transform: translateZ(50px);
    }
    .content .inBack{
        transform: translateZ(-50px);
    }
    .content .inTop{
        transform: rotateX(90deg) translateZ(50px);
    }
    .content .inBottom{
        transform: rotateX(-90deg) translateZ(50px);
    }
    .content .inLeft{
        transform: rotateY(90deg) translateZ(50px);
    }
    .content .inRight{
        transform: rotateY(-90deg) translateZ(50px);
    }
    @keyframes rotate{
        from{transform: rotateX(0deg) rotateY(0deg);}
        to{transform: rotateX(360deg) rotateY(360deg);}
    }

</style>
</head>
<body>
<canvas id="canv"></canvas>
<div class="page">
    <div class="content">
        <div class="top">
            <img src="./img/2.png" alt="">
        </div>
        <div class="bottom">
            <img src="./img/1-1.jpg" alt="">
        </div>
        <div class="left">
            <img src="./img/6.png" alt="">
        </div>
        <div class="right">
            <img src="./img/3.jpg" alt="">
        </div>
        <div class="front">
            <img src="./img/4.jpg" alt="">
        </div>
        <div class="back">
            <img src="./img/5.jpg" alt="">
        </div>
        <div class="inTop inDiv">
            <img src="./img/6.jpg" alt="">
        </div>
        <div class="inBottom inDiv">
            <img src="./img/5-1.jpg" alt="">
        </div>
        <div class="inLeft inDiv">
            <img src="./img/2-png.jpg" alt="">
        </div>
        <div class="inRight inDiv">
            <img src="./img/3-1.jpg" alt="">
        </div>
        <div class="inFront inDiv">
            <img src="./img/4-1.jpg" alt="">
        </div>
        <div class="inBack inDiv">
            <img src="./img/5-1.jpg" alt="">
        </div>

    </div>
</div>


<script>
    window.requestAnimFrame = (function() {
      return window.requestAnimationFrame ||
        window.webkitRequestAnimationFrame ||
        window.mozRequestAnimationFrame ||
        window.oRequestAnimationFrame ||
        window.msRequestAnimationFrame ||
        function(callback) {
          window.setTimeout(callback, 1000 / 60);
        };
    })();
    var c = document.getElementById('canv');
    var $ = c.getContext('2d');
    var w = c.width = window.innerWidth;
    var h = c.height = window.innerHeight;
    var _w = w * 0.5;
    var _h = h * 0.5;
    var arr = [];
    var cnt = 0;

    window.addEventListener('load', resize);
    window.addEventListener('resize', resize, false);

    function resize() {
      c.width = w = window.innerWidth;
      c.height = h = window.innerHeight;
      c.style.position = 'absolute';
      c.style.left = (window.innerWidth - w) *
        .01 + 'px';
      c.style.top = (window.innerHeight - h) *
        .01 + 'px';
    }

    function anim() {
      cnt++;
      if (cnt % 6) draw();
      window.requestAnimFrame(anim);
    }
    anim();

    function draw() {

      var splot = {
        x: rng(_w - 900, _w + 900),
        y: rng(_h - 900, _h + 900),
        r: rng(20, 80),
        spX: rng(-1, 1),
        spY: rng(-1, 1)
      };

      arr.push(splot);
      while (arr.length > 100) {
        arr.shift();
      }
      $.clearRect(0, 0, w, h);

      for (var i = 0; i < arr.length; i++) {

        splot = arr[i];;
        $.fillStyle = rndCol();
        $.beginPath();
        $.arc(splot.x, splot.y, splot.r, 0, Math.PI * 2, true);
        $.shadowBlur = 80;
        $.shadowOffsetX = 2;
        $.shadowOffsetY = 2;
        $.shadowColor = rndCol();
        $.globalCompositeOperation = 'lighter';
        $.fill();

        splot.x = splot.x + splot.spX;
        splot.y = splot.y + splot.spY;
        splot.r = splot.r * 0.96;
      }
    }

    function rndCol() {
      var r = Math.floor(Math.random() * 180);
      var g = Math.floor(Math.random() * 60);
      var b = Math.floor(Math.random() * 100);
      return "rgb(" + r + "," + g + "," + b + ")";
    }

    function rng(min, max) {
      return Math.floor(Math.random() * (max - min + 1)) + min;
    }
</script>
</body>
</html>

 

3.运行