css3 2d 3d教学

CSS3 是 CSS 技术的升级版，其中包括了许多新的属性和模块。其中最重要的是 2D 转换和 3D 转换。这两种技术可以极大地改变页面元素的展现方式。

2D 转换是指元素在平面中的转换。例如，可以通过以下代码将一个 div 元素旋转 45 度：

div {
    transform: rotate(45deg);
}

3D 转换则是指元素在三维空间中的转换。例如，可以通过以下代码将一个元素以 Y 轴为轴心旋转 45 度：

div {
    transform: rotateY(45deg);
}

在实践中，我们通常需要使用多个转换来对元素进行定位和展现。下面是一个用于实现 2D 转换的例子，它将图片旋转并稍微移动一下：

img {
    transform: rotate(30deg) translate(50px,50px);
}

类似地，下面是一个用于 3D 转换的例子，它将一个元素旋转并且翻转：

div {
    transform: rotateX(45deg) rotateY(45deg) rotateZ(45deg);
    transform-style: preserve-3d;
}

最后，要注意一下浏览器对 2D 和 3D 转换的支持情况。目前，大多数现代浏览器都支持这些属性，但是旧的浏览器可能会无法完全支持它们。所以，在使用这些属性的时候，一定要确认浏览器的兼容性。