[分享]css动画开启3d效果

CSS动画是现代Web开发中非常常见的一种技术，而在这一技术的基础上，我们可以实现非常优秀的3D效果。本文将向读者介绍如何在CSS动画中开启3D效果。/ 给元素添加3D效果 / transform: ...

CSS动画是现代Web开发中非常常见的一种技术，而在这一技术的基础上，我们可以实现非常优秀的3D效果。本文将向读者介绍如何在CSS动画中开启3D效果。

/* 给元素添加3D效果 */
transform: translateZ(0);
transform-style: preserve-3d;

/* 开启元素的3D动画 */
animation: my-3d-animation 2s ease-in-out infinite;

/* 定义3D动画 */
@keyframes my-3d-animation {
    0% {transform: rotateY(0deg);}
    100% {transform: rotateY(360deg);}
} 

如上所示，在CSS中开启3D效果的方法其实很简单，只需在需要添加3D效果的元素上添加如下代码：

transform: translateZ(0);
transform-style: preserve-3d; 

这样一来，元素就会被赋予3D效果，并且可以在动画中展现出来。接着，我们可以通过CSS动画的方法来开启元素的3D动画：

animation: my-3d-animation 2s ease-in-out infinite; 

这个代码段中，我们定义了一个名为“my-3d-animation”的动画，动画效果是元素在2秒内从0度的Y轴旋转到360度的Y轴，动画效果是缓慢进出的，且无限循环。需要注意的是，在这个动画中需要使用到3D效果的元素，所以需要先对元素添加3D效果。

正如我们在文章开头所说，CSS动画是现代Web开发中非常常见的一种技术，如果能够结合上3D效果，可以让网站更加优秀和精美。在今后的Web开发中，为网站加入3D效果、动画效果，将会越来越得到开发者们的重视。