3D 转换
rotateX/Y/Z、perspective 透视、transform-style 3D 空间
3D 转换
3D 变换让元素在三维空间中旋转——需要 perspective 提供深度感。
学完本章你将： 掌握 rotateX/Y/Z、perspective、transform-style。
3D 旋转
css
.rotate-x { transform: rotateX(45deg); } /* 绕 X 轴——向前翻转 */
.rotate-y { transform: rotateY(45deg); } /* 绕 Y 轴——左右翻转 */
.rotate-z { transform: rotateZ(45deg); } /* 绕 Z 轴——同 2D rotate */perspective 透视
css
/* perspective 必须设在父元素上 */
.scene {
perspective: 600px; /* 值越小——透视效果越强 */
}
.card {
transform: rotateY(45deg);
}3D 空间
css
.scene {
perspective: 600px;
}
.card {
transform-style: preserve-3d; /* 子元素也保留 3D */
transition: transform 0.6s;
}
.card:hover {
transform: rotateY(180deg); /* 翻转卡片 */
}卡片翻转效果
css
.flip-card {
perspective: 800px;
}
.flip-inner {
position: relative;
transform-style: preserve-3d;
transition: transform 0.6s;
}
.flip-card:hover .flip-inner {
transform: rotateY(180deg);
}
.flip-front, .flip-back {
position: absolute;
backface-visibility: hidden; /* 背面隐藏 */
}
.flip-back {
transform: rotateY(180deg);
}