css 3d旋转

/* 定义一个3D旋转的CSS示例 */

/* 1. 设置容器为3D空间 */
.container {
    perspective: 1000px; /* 设置透视效果，值越大越远 */
}

/* 2. 设置要旋转的元素 */
.box {
    width: 200px;
    height: 200px;
    background-color: lightblue;
    transition: transform 1s; /* 添加过渡效果 */
    transform-style: preserve-3d; /* 保持3D转换效果 */
}

/* 3. 当鼠标悬停时触发旋转 */
.box:hover {
    transform: rotateX(45deg) rotateY(45deg); /* 沿X轴和Y轴旋转 */
}

解释说明：

1. perspective：设置在父容器上，用于定义3D空间的透视效果。值越大，物体看起来越远，透视效果越弱。
2. transform-style: preserve-3d：确保子元素也保持在3D空间中，而不是被压平到2D平面。
3. rotateX() 和 rotateY()：分别沿X轴和Y轴进行旋转，角度单位是deg（度）。
4. transition：添加平滑的过渡效果，使得旋转过程更加流畅。

当鼠标悬停在 .box 元素上时，它会沿着X轴和Y轴同时旋转45度。