1. 透视（Perspective）： perspective 属性定义了观察者与元素之间的距离，影响透视效果。
perspective: 1000px;
这个例子设置了透视距离为1000像素。
2. 透视原点（Perspective Origin）： perspective-origin 属性定义了透视点的位置。
perspective-origin: 50% 50%;
这个例子设置了透视原点在元素中心。
3. 三维旋转（Rotate3d）： rotate3d() 函数用于在三维空间内绕指定轴进行旋转。
transform: rotate3d(1, 1, 0, 45deg);
这个例子表示元素绕 x 轴和 y 轴的方向旋转45度。
4. 三维缩放（Scale3d）： scale3d() 函数用于在三维空间内进行缩放。
transform: scale3d(1.5, 1.2, 0.8);
这个例子表示元素在 x 轴方向上放大1.5倍，在 y 轴方向上放大1.2倍，在 z 轴方向上缩小0.8倍。
5. 三维移动（Translate3d）： translate3d() 函数用于在三维空间内进行平移。
transform: translate3d(50px, -20px, 30px);
这个例子表示元素在 x 轴方向上移动50像素，在 y 轴方向上向上移动20像素，在 z 轴方向上移动30像素。
6. 三维变换原点（Transform Origin）： transform-origin 属性用于设置元素的变换原点。
transform-origin: 50% 50% 0;
这个例子表示元素的变换原点在 x 轴和 y 轴的中心，z 轴方向为0。
3D 转换的组合和过渡效果：
3D 转换效果同样可以通过组合和过渡效果实现更加复杂的动画效果：
transform: perspective(1000px) rotateX(45deg) rotateY(45deg) translateZ(50px);
transition: transform 1s ease-in-out;
这个例子表示元素在透视距离为1000像素的情况下，先绕 x 轴和 y 轴各旋转45度，然后在 z 轴方向上移动50像素。过渡效果将使得这些变换在1秒内平滑过渡。
3D 转换提供了更加丰富的空间变换效果，可以用来创建更加引人入胜的页面交互和动画效果。
转载请注明出处：http://www.zyzy.cn/article/detail/12565/CSS