rotation,translation,scalingandtilting基本定义旋转（Rotate）——元素绕一个轴旋转一定角度。(transform:rotateX(xdeg)|rotateY(ydeg)|rotateZ(zdeg))平移——元素在各个方向上下左右移动（有点类似于相对定位）。(transform:translate(x,y)|translateX(x)|translateY(y)|translateZ(z))缩放-缩小或放大元素。(transform:scale(x,y)|scaleX(x)|scaleY(y))Skew——使元素变形，顶边沿一个方向滑动，底边沿相反方向滑动。(transform:skew(x,y)|skewX|skewY)注意事项1.使用transform需要注意一点，虽然元素可能会移动到页面的新位置，但不会脱离文档流.您可以在屏幕范围内以多种方式平移元素，其初始位置不会被其他元素占用。当一个元素旋转时，它的角可能会移出屏幕边缘，也可能会遮住旁边其他元素的部分内容。2.转换不能应用于内联元素，如或。3.转变发生在原点附近。基点是旋转轴，也是缩放或倾斜开始的地方。这意味着元素的基点固定在某个位置，元素的其余部分围绕基点进行变换（translate()除外，因为元素在平移过程中作为一个整体移动）。默认情况下，基点是元素的中心，但可以通过transform-origin属性更改基点位置。4.可以为transform属性指定多个值，以空格分隔。转换的每个值都是从右到左顺序执行的。三维（3D）变换旋转和平移可以在三个维度上实现：X轴、Y轴和Z轴。控制透视距离在给页面添加3D变换之前，我们需要确定一件事，那就是透视距离（perspective）。变换后的元素一起形成一个3D场景。浏览器然后计算3D场景的2D图像并将其呈现到屏幕上。我们可以把透视距离想象成“相机”和场景之间的距离，来回移动相机会改变整个场景最终在图像上的显示方式。如果镜头比较近（即透视距离小），那么3D效果会更强。如果镜头距离远（即透视距离大），则3D效果会较弱。透视距离位置设置不同造成的差异首先，我们给四个元素添加旋转效果，使用rotateX()让它们向后倾斜（如下图所示）。由于每个元素都旋转相同的角度并且具有相同的perspective()集，因此它们看起来相同。
