本文内容是CSS实现3D动画特效的代码示例。具有一定的参考价值。有需要的朋友可以参考一下。希望对您有所帮助！一、动画属性1.transform-style:flat|preserve-3dAnimationformflat：默认值flat，即无3d效果preserve-3d：3d效果显示如果要使用3D表现，必须启用该属性，当然注意属性前面有各种前缀。（这个属性可以把一个2维的div变成3d空间，把这个属性比作一个camera相机，这个div里面的内容会通过camera以3d的形式反馈给你，它的子元素会享受3D效果，子元素下面的元素不会有3D效果。）2.transform-origin:50%50%;围绕旋转移动的轴，默认为中心，可以设置left，right，top，bottom，或者设置值，这样就可以调整旋转移动的轴，完成翻页等动作打开门。（这个相当于你的眼镜，位置不同效果会不一样）3、透视值越小，透视距离越近，效果越明显。该属性是定义3D变换的元素与视图之间的距离，即透视距离。该属性应该添加到视图元素（转换元素的父元素）。这是3D动画的必要属性。如果不加这个属性，动画会变成平面效果。一般用在舞台元素上，也就是容器上，让容器中使用的动画元素使用透视。这个属性也可以单独用在每个元素中，自然元素只呈现自己的透视风格。4.backface-visibility:hidden是否隐藏元素的背面2.动画实现下面我会用一些代码来实际讲解一下3D效果的实现。1.卡片翻转htmlcss效果2.立方体htmlcss.box{width:500px;高度：500px；边距：50px自动；边框：1px实心；视角：3000px；透视原点：-90%-160%；}.boxul{宽度：100px;高度：100px；位置：相对；顶部：200px；保证金：0自动；变换样式：保留3d；}.boxulli{宽度：100px；高度：100px；文本对齐：居中；行高：100px；字体大小：25px；白颜色;位置：绝对；背景：rgba（225,0,0,0.2）；边框：1px纯黑色；过渡：全1s线性；}/*上面*/li:nth-child(1){transform:translateY(-50px)rotateX(90deg);}.boxul:hoverli:nth-child(1){transform:translateY(-100px)rotateX(90deg);背景：淡紫色；边界：0；边界半径：50%；}/*后面*/li:nth-child(2){transform:translateX(50px)rotateY(90deg);}.boxul:hoverli:nth-child(2){transform:translateX(100px)rotateY(90deg);背景：#92ecae；边界：0；边界半径：50%；}/*下面*/li:nth-child(3){transform:translateY(50px)rotateX(90deg);}.boxul:hoverli:nth-child(3){transform:translateY(100px)rotateX(90deg);背景：#ff916a；边界：0；边界半径：50%；}/*左面*/li:nth-child(4){transform:translateX(-50px)rotateY(90deg);}.boxul:hoverli:nth-child(4){transform:translateX(-100px)rotateY(90deg);背景：绿黄色；边界：0；边界半径：50%；}/*右面*/li:nth-child(5){transform:translateZ(-50px);}.boxul:hoverli:nth-child(5){transform:translateZ(-100px);背景：浅天蓝；边界：0；边界半径：50%；}/*正面*/li:nth-child(6){变换：translateZ(50px);}.boxul:hoverli:nth-child(6){transform:translateZ(100px);背景：#be46d8；边界：0；边界半径：50%；}.boxul:hover{变换：rotateX(9000deg)rotateY(5000deg);过渡：所有100s线性；}效果3.长方体htmlcss*{padding:0;保证金：0；列表样式：无；}.wutai{width:900px;高度：600px；边框：1px实心；保证金：0自动；视角：1000px；透视原点：50%1%；}.wutaiul{width:100px;高度：300px；位置：相对；保证金：0自动；顶部：150px；变换样式：保留3d；}.wutai:hoverul{transform:rotateY(36000000deg);过渡：所有1000000s线性；}.wutaili{width:100px;高度：300px；位置：绝对；文本对齐：居中；行高：300px；字体大小：30px；白颜色;}li:nth-child(1){背景：rgba(255,0,0,0.6);变换：rotateY(30deg)translateZ(200px);}li:nth-child(2){背景：rgba(0,255,0,0.6);变换：旋转Y(60deg)translateZ(200px)；}li:nth-child(3){背景：rgba(225,225,0,0.6);变换：旋转Y(90deg)translateZ(200px)；}li:nth-child(4){背景：rgba(225,0,225,0.6);变换：旋转Y(120deg)translateZ(200px)；}li:nth-child(5){背景：rgba(0,225,225,0.6);变换：rotateY(150deg)translateZ(200px);}li:nth-child(6){背景：rgba(225,0,0,0.6);变换：旋转Y(180deg)translateZ(200px)；}li:nth-child(7){背景：rgba(225,0,225,0.6);变换：旋转Y(210deg)translateZ(200px)；}li:nth-child(8){背景：rgba(0,0,225,0.6);反式形式：rotateY(240deg)translateZ(200px);}li:nth-child(9){背景：rgba(0,225,225,0.6);变换：旋转Y(270deg)translateZ(200px)；}li:nth-child(10){背景：rgba(225,225,0,0.6);变换：旋转Y(300deg)translateZ(200px)；}li:nth-child(11){背景：rgba(225,0,225,0.6);变换：旋转Y(330deg)translateZ(200px)；}li:nth-child(12){背景：rgba(0,225,225,0.6);变换：旋转Y(360deg)translateZ(200px);}效果四、图片旋转htmlcss效果总结：总体来说动画方面，主要是通过各种动画属性来区分自己要写的主要容器和动画元素。您可以使用计时器来帮助加载各种类型的样式。最重要的是：了解自己的动画水平，头脑清醒地进行部署。动画所需的一切。如果觉得我的文章还不错，请关注并收藏！更多3D动画源码在这里，有兴趣的朋友可以参考一下！https://liyingyingweb.github....
