用css实现3D效果

前提：

        父元素设置transfrom-style:preserve-3d,开启3D，同时可设transition: transform 0.5s ease-in；来表示动画过渡时间。

一，3D旋转

        相关属性

属性名	属性值	属性含义
transfrom	rotateX/Y/Z /rotate3D	rotateX/Y/Z是沿着对应的轴进行旋转， rotate3D是沿着自定义的轴进行旋转
transfrom-origin	(x,y,z) x可取值：left/center/right/百分数/length y;可取值：top/center/bottom/百分数/length z:可取值：length	旋转轴的位置

下面是一张效果图：

在X轴和Y轴旋转中，我们可以看到旋转轴都在页面正中间。但是也可通过CSS改变轴的位置

下面是相关代码，红色代表旋转轴

.ziX{
            /* 沿X轴进行旋转 */
            transform: rotateX(60deg);
            transform-origin: center top 0;
            border-top:2px solid red;
        }
 .ziY{
            /* 沿Y轴进行旋转 */
            transform: rotateY(60deg);
            transform-origin: left center 0;
            border-left:2px solid red;
        }

        案例：盒子旋转

.fu{
            width: 200px;
            height: 300px;
            position: relative;
            transform-style: preserve-3d;
            /* transform: rotateX(0deg) rotateY(119deg); */
            animation: rotateAnimation 8s infinite;
            margin-top: 100px;
            margin-left: 100px;
           
        }
        .fu div{
            width: 200px;
            height: 200px；
            background: #ccc;
            color: red;
            text-align: center;
            line-height: 200px;
            font-size: large;
            border: 1px solid red;
            position: absolute;

        }
        .div1{
            transform:translateZ(100px);
        }
        .div2{
            transform:rotateY(180deg) translateZ(100px);

        }
        .div3{
            transform: rotateY(90deg) translateZ(100px);
        }
        .div4{
            transform: rotateY(270deg) translateZ(100px);
        }
        @keyframes rotateAnimation{
            0%{
                transform: rotateY(0deg);
            }
            100%{
                transform: rotateY(360deg);
            }
        }

               

<div class="fu">
        <div class="div1">前</div>
        <div class="div2">后</div>
        <div class="div3">左</div>
        <div class="div4">右</div>
    </div>

        注意：

1，父元素要设置：transform-style: preserve-3d来保证3D效果。且父元素的宽度要与设置的3D图形的宽度相近，否则在进行动画旋转时会进行公转而不是自转。

2，做自转3D动画时，子元素要先旋转后位移，即transfrom:rotate(60deg) translateZ(200px);而不是transfrom:translateZ(200px) rotate(60deg)

二，旋转和位移的先后顺序有什么不同？

下面的效果图为了更好的展示，都在其父元素上做了一定角度的偏转。

1，先位移的话，会默认所有的子元素使用同一个坐标系。

.left{
            transform: translateZ(200px) rotateY(90deg);
        }
.right{
            transform: translateZ(-200px) rotateY(90deg);
       }

结果如下图所示：两个元素在同一平面上，此时的Z轴垂直于屏幕。

2，先旋转的话，会默认每个子元素都有一个单独的坐标系。

.left{
            transform: rotateY(90deg) translateZ(200px);
        }
        .right{
            transform: rotateY(90deg) translateZ(-200px);
        }

结果如下图所示：两个图像平行，旋转后每个元素的轴也跟着旋转，此时两个元素的Z轴都垂直于两个元素，而不是垂直于屏幕了。