这是我参与2022首次更文挑战的第4天，活动详情查看：2022首次更文挑战

前言

大家好，我是不吃鱼d猫，紧接着上文，我们说了3d动画，也给大家留下了题目，如何实现立方体，今天我们来实现实现，在3d空间里面很好实现的。

效果图

解析力立方体的实现

如上图所示，立方体是六个面的，首先3d肯定要有3d空间，给六个盒子的父元素设置3d空间，然后就可以给每个盒子设置，位移 transform: translate3d(x,y,z)，旋转 transform: rolate3d（x,y,z,deg）啊。那么如何让他动起来？？？

css动画animation

步骤

创建动画
触发动画

创建动画@keyframes 两种

//move为动画名
 @keyframes move {
            0% {  
            }
            100% {
            }
        }

//move为动画名，是不是语义化严重
 @keyframes move {
            from {
            }
            to {
            }
        }

触发动画

animation属性可以有8个参数，中间用空格隔开
animation: 1动画名 2执行时间 3动画速度 4动画延迟 5执行次数（infinite为无限次） 6执行方向 7执行状态 8动画停止的位置 ;

代码实现

首先父元素下有六个盒子

 <div>
        <p class="box1"></p>
        <p class="box2"></p>
        <p class="box3"></p>
        <p class="box4"></p>
        <p class="box5"></p>
        <p class="box6"></p>
    </div>

给父元素设置3d空间 transform-style: preserve-3d;，相对定位 position: relative;。给子元素设置绝对定位position: absolute;让他们叠在一起。

给父元素设置动画

//linear为匀速运动
 animation: move 10s linear infinite;
 @keyframes move {
            from {
                transform: rotate3d(1, 1, 1, 0deg);
            }
            to {
                transform: rotate3d(1, 1, 1, 360deg);
            }
        }

Untitled ‑ Made with FlexClip (1).gif

子元素变形中点的判断

如下图所示，立方体侧面变形的中点在红点处
接着我们就在3d空间中旋转与位移，如下动图显示，
Untitled ‑ Made with FlexClip (2).gif

黄色盒子向后位移了盒子的长度

 div>.box1 {
            background-color: yellow;
            transform: translateZ(-200px);
        }

蓝色盒子旋转了90度，注意transform-origin是设置变形的中心点。

 div>.box2 {
            background-color: blue;
            transform-origin: 0px 0px;
            transform: rotateX(-90deg);
        }

绿色的盒子也是旋转90度，只是变形的中点不同

 div>.box3 {
            background-color: green;
            transform-origin: 100% 100%;
            transform: rotateX(90deg);
        }

粉色盒子

div>.box4 {
            background-color: pink;
            transform-origin: 100% 100%;
            transform: rotatey(-90deg);
        }

橘色盒子

 div>.box5 {
            background-color: orange;
            transform-origin: 0 100%;
            transform: rotatey(90deg);
        }

最后

代码实现就是如此，这样就形成了一个立方体，然后再贴上好看的背景，立方体外面在加上个大些的立方体，用伪类选择器hover,鼠标移入后的状态，鼠标移入后外面立方体拆开，背景透明些 opacity,效果就会更加明显，送给女朋友好看的旋转立方体相册就出来啦。大家可以多去玩一玩css,实现一些新的创意。

3d旋转立方体相册，纯css实现。

前言

效果图