利用 CSS3 的 transform 和 transition 属性创建 3D 动画效果

CSS3 transform 和 transition 属性是创建 3D 动画效果的重要工具。以下是一些示例：

1. 旋转动画

使用 CSS transform 属性可以实现元素的旋转效果。可以通过设置 rotateX、rotateY 或 rotateZ 属性来使元素绕着不同的轴旋转。

.box{
    transform: rotateY(180deg);
    transition: all 1s ease-in-out;
}
.box:hover{
    transform: rotateY(360deg);
}

以上代码会在鼠标悬浮时，将元素绕着 Y 轴旋转 360 度。

2. 翻转动画

与旋转类似，使用 CSS transform 属性也可以实现元素的翻转效果。可以通过设置 rotateX 或 rotateY 属性来使元素沿着不同的轴翻转。

.box{
    transform: perspective(500px) rotateY(0deg);
    transition: all 1s ease-in-out;
}
.box:hover{
    transform: perspective(500px) rotateY(180deg);
}

以上代码会在鼠标悬浮时，将元素沿着 Y 轴翻转 180 度。

3. 缩放动画

使用 CSS transform 属性可以实现元素的缩放效果。可以通过设置 scale 属性来使元素按比例缩放。

.box{
    transform: scale(1);
    transition: all 1s ease-in-out;
}
.box:hover{
    transform: scale(1.5);
}

以上代码会在鼠标悬浮时，将元素按比例缩放 1.5 倍。

4. 平移动画

使用 CSS transform 属性可以实现元素的平移效果。可以通过设置 translateX 或 translateY 属性来使元素沿着 X 轴或 Y 轴平移。

.box{
    transform: translateX(0);
    transition: all 1s ease-in-out;
}
.box:hover{
    transform: translateX(100px);
}

以上代码会在鼠标悬浮时，将元素沿着 X 轴平移 100px。