[CSS]CSS3 3D 转换

CSS3 3D 转换允许你改变元素在三维空间中的位置或旋转。它们可以通过改变 translateX(x), translateY(y) 和 translateZ(z) 的值来移动元素，或者通过改变 rotateX(x), rotateY(y) 和 rotateZ(z) 的值来旋转元素。

以下是一些基本的 3D 转换的例子：

/* 移动元素 */
.element {
  transform: translateX(50px) translateY(100px) translateZ(50px);
}
 
/* 旋转元素 */
.element {
  transform: rotateX(45deg) rotateY(90deg) rotateZ(135deg);
}
 
/* 缩放元素 */
.element {
  transform: scaleX(1.5) scaleY(2) scaleZ(2);
}
 
/* 3D 转换的应用 */
.flip-card {
  perspective: 1000px; /* 创建3D效果 */
}
 
.flip-card-inner {
  transition: transform 0.6s;
  transform-style: preserve-3d;
}
 
.flip-card:hover .flip-card-inner {
  transform: rotateY(180deg);
}

这个例子展示了如何创建一个简单的翻转卡片效果，当鼠标悬停时卡片翻转。