CSS3 3d旋转图片立方体特效代码

3d旋转图片立方体特效图

如图所示：3D立方体由6个平面组成，主要运用了css3旋转（ transform:rotate(deg); ）css3位移（transform：translate(npx)）搭建而成。

---

html代码
第一步：先建立一个父元素放6个平面

 <div class="box">
        <div class="box1">😁</div>
        <div class="box2">😆</div>
        <div class="box3">😎</div>
        <div class="box4">😏</div>
        <div class="box5">😘</div>
        <div class="box6">😉</div>
    </div>

给父元素添加transform-style: preserve-3d; 由原来的2d变成一个3d空间。

父元素代码如下

 .box{
            width: 300px;
            height: 300px;
            margin: 150px auto;
            position: relative;
            /* 形成3d效果 */
            transform-style: preserve-3d;
            /* y轴旋转28deg ，x轴旋转11deg  方便观察*/
            transform: rotateY(28deg) rotateX(11deg);
            /* 动画效果 匀速 重复 */
            animation:sPinxz 6s linear infinite;
        }

第二步：给每一个子元素（每一个面）添加大小，定位到父元素上
代码如下

    .box div{
            width: 300px;
            height: 300px;
            line-height: 300px;
            font-size: 100px;
            font-weight: bold;
            color: white;
            text-align: center;
            /* 绝对定位 */
            position: absolute;
            top: 0;
            opacity: 0.8;
        }

第三步：控制每一个面在父元素上的位置，通过位移和旋转实现

代码如下

   .box1{
            background: red;
            transform:translateZ(150px);
            /* 向前150px */
        }

   .box2{
            background: green;
            transform:translateZ(-150px)  rotateY(180deg);
             /* 向后150px  旋转180度*/  
        }

 .box3{
            background: blue;
            transform:translateX(-150px) rotateY(-90deg);
              /* 向左150px  旋转-90度*/
        }

 .box4{
            background: orange;
            transform:translateX(150px) rotateY(90deg);
        }

  .box5{
            background: brown;
            transform:translateY(-150px) rotateX(90deg);
        }

 .box6{
            background: pink;
            transform:translateY(150px) rotateX(-90deg);
        }

第四步：让立方体转起来：在父元素上添加 animation动画
调用关键帧 @keyframes：关键帧名称{}
代码如下：

 @keyframes sPinxz{
            0%{
            transform: rotateY(0deg) rotateX(0deg);
           }
           25%{
            transform: rotateY(90deg) rotateX(180deg);
           }
           50%{
            transform: rotateY(180deg) rotateX(360deg);
           }
           75%{
            transform: rotateY(270deg) rotateX(540deg);
           }
           100%{
            transform: rotateY(360deg) rotateX(720deg);
           }
        }