CSS3的2D变形属性，scale：用来缩放元素（放大和缩小），translate:在屏幕上移动元素（上下左右），rotate:按照一定角度旋转元素（单位为度），skew:沿X和Y轴对元素进行斜切，matrix:允许以像素精度来控制变形效果。变形是在文档外发生的。一个变形的元素不会影响它附近未变形元素的位置。
transform-origin:注意在CSS里，默认的变形原点是在正中心：元素X轴的50%和Y轴的50%处。这个和SVG默认的左上角是不同的。使用transform-origin,我们可以修改变形原点。第一个值是水平方向上的偏移量，第二个值是垂直方向上的偏移量。关键字代表方向的数值。如果使用长度，它们会相对元素左上角计算该点位置。
CSS3实现翻转元素
.flipper { perspective: 400px; position: relative; width: 300px; height: 44px; } .flipper + .flipper { margin-top: 1em; } .flipper-object { position: absolute; width: 100%; height: 100%; transition: transform 1s; transform-style: preserve-3d; } .panel { display: flex; min-height: 44px; align-items: center; justify-content: center; top: 0; width: 100%; height: 100%; position: absolute; backface-visibility: hidden; } .flipper-vertical .back { transform: rotateX(180deg); } .flipper-horizontal .back { transform: rotateY(180deg); } .back { background-color: #CC3232; } .front { background-color: #739328; } .flipper:hover .flipper-vertical { transform: rotateX(180deg); } .flipper:hover .flipper-horizontal { transform: rotateY(180deg); }
其中比较关键的元素是:transform-styles:preserve-3d;这告诉浏览器，当我们要为这个元素创造变形效果时，它的子元素也保持3D效果。perspective可以给元素设置透视（浏览器支持不好）。backface-visibility:hidden;这个属性定义元素不面向元素时是否隐藏。默认隐藏元素，可以翻转180度。hover时，元素翻转180%。
transform3d这个属性，可以在X,Y,Z轴上移动元素。
transform3d最大用处在于将面板移入移出屏幕，尤其是如“离屏”导航模式。
