3D旋转盒子

css样式：

        .stage{
          　width: 400px;
          　position: relative;
        　　perspective: 800px;    //翻译成景深或视距
        }
        @keyframes rotate-frame{
            0% {
                transform: rotateX(0deg);
            }
            25% {
                transform: rotateX(180deg);
            }
            50% {
                transform: rotateX(360deg) rotateY(0deg);
            }
            75% {
                transform: rotateX(360deg) rotateY(180deg);
            }       
            100% {
                transform: rotateX(360deg) rotateY(360deg);
            }    
        }
        .container{
            width: 450px;
            height: 450px;
            transform-style:preserve-3d;
            transform-origin: 50% 50%;
            animation: rotate-frame 10s infinite linear;
        }
        .side{
          width: 150px;
          height: 150px;
          position: absolute;
          box-shadow: inset 0 0 20px rgba(0,0,0,0.9);
          text-align: center;
          line-height: 150px;
        }
        .top{
          left: 150px;
          top: 0;
          transform: rotateX(-90deg);
          -o-transform: rotateX(-90deg);
          transform-origin: bottom;
          -o-transform-origin: bottom;
        }
        .bottom{
          left: 150px;
          top: 300px;
          transform: rotateX(90deg);
          transform-origin: top;
        }
        .left{
          left: 0;
          top: 150px;
          transform: rotateY(90deg);
          transform-origin: right;
        }
        .right{
          left: 300px;
          top: 150px;
          transform: rotateY(-90deg);
          transform-origin: left;
        }
        .front{
          left: 150px;
          top: 150px;
          transform: translateZ(150px);
        }
        .back{
          left: 150px;
          top: 150px;
        }
        .side img{
          width:150px;
          height:150px;
        }    

HTML：

<div class="stage">
  <div class="container">
    <div class="side top"><img src="1.jpg"></div>
    <div class="side bottom"><img src="1.jpg"></div>
    <div class="side left"><img src="1.jpg"></div>
    <div class="side right"><img src="1.jpg"></div>
    <div class="side front"><img src="1.jpg"></div>
    <div class="side back"><img src="1.jpg"></div>
  </div>
</div>

 

转载于:https://www.cnblogs.com/zkthink/p/5332173.html