CSS3Transform是一种新的CSS技术，通过使用它，网站设计师能够为网站页面创建出令人惊叹的3D效果。此技术带来了革新性的变化，一些之前被认为不可能做到的效果成为了可能。

在CSS3Transform的基础上，网站设计师可以轻松地为他们的网站添加旋转、缩放、平移或者倾斜的效果。这项技术的实现是通过使用CSS属性和函数来改变HTML文档中的元素旋转角度和移动位置。它可以为设计师提供多种方式，更高效地管理他们的网站布局和外观。

下面，通过几个例子来探究CSS3Transform带来的革新性效果：

1. -webkit-transform: rotateY(45deg);

旋转：通过旋转效果，设计师可以改变网站视觉上的层叠顺序，使元素给人以视觉冲击力。通过使用rotateY()属性，设计师可以让元素围绕Y轴旋转。通过在45deg处设置角度，可以让元素旋转45度。如果想要在X轴上旋转的话，可使用rotateX()属性。此操作效果如下：


2. -webkit-transform: scale(1.5);

缩放：借助CSS3Transform技术，设计师可以扩大或缩小网站中的元素。使用缩放效果，可让元素复杂化并让图形更具视觉冲击力。其中一个方法是利用scale()属性。因为这种方法是相对的，所以如果想要将一个元素放大，可以使用1.5的参数值，如下所示：


3. -webkit-transform: translate(100px, 100px);

平移：通过CSS3Transform技术，设计师可以移动它们的元素，以展示各种视觉效果。利用translate()属性，设计师可以让元素按指定目标来偏移位置。下一步，只需制定要移动的距离即可。例如，如果想要将一个元素往下平移100px，并往右平移100px，则可使用translate(100px, 100px)的命令。效果如图所示：


4. -webkit-transform: skew(20deg, 10deg);

倾斜：借助倾斜效果，网站设计师可以使网站在视觉上更具层次感。设计师可以使用skew()属性，让网站的元素以一定的角度倾斜。要将元素沿X轴倾斜，请使用skewX()属性；要将元素沿Y轴倾斜，请使用skewY()属性。如要设置一个元素在X轴上倾斜20度，在Y轴上倾斜10度，则可以使用skew(20deg, 10deg)的命令。效果如图所示：


通过使用CSS3Transform，网站设计师可以在创建网站时用更可视化的方式展现内容。不过，在使用的过程中需要注意，要尽可能的为不同的浏览器写出适配的代码，否则效果可能大打折扣。