[分享]css中3d动画效果代码

在CSS中，我们可以利用3D动画效果来为网页增添一些生动感和立体感，让用户更好地体验网站的交互和视觉效果。下面是一些常用的3D动画效果代码和示例演示。/ 3D旋转特效 / .box { transfo...

在CSS中，我们可以利用3D动画效果来为网页增添一些生动感和立体感，让用户更好地体验网站的交互和视觉效果。下面是一些常用的3D动画效果代码和示例演示。

/* 3D旋转特效 */
.box {
  transform-style: preserve-3d; /* 保持3D空间 */
  perspective: 1000px; /* 透视效果 */
}
.box:hover {
  transform: rotateX(360deg); /* 在X轴上旋转360度 */
}

/* 3D折叠特效 */
.box {
  transform-style: preserve-3d; /* 保持3D空间 */
  perspective: 1000px; /* 透视效果 */
}
.box:hover .inner {
  transform: rotateY(180deg); /* 在Y轴上旋转180度 */
}
.box .inner {
  transform: rotateY(0deg);
}

/* 3D平移特效 */
.box {
  transform-style: preserve-3d; /* 保持3D空间 */
  perspective: 1000px; /* 透视效果 */
}
.box:hover {
  transform: translateX(100px); /* 在X轴上平移100px */
}

上述代码中，我们首先使用transform-style属性来保持3D空间，然后利用perspective属性来设置透视效果。接下来就可以使用transform属性来实现各种3D动画效果，如旋转、折叠和平移。需要注意的是，这些属性的值和方向都可以自由组合，以满足不同的设计需求。