PHP从入门到精通，040第三章HTML5+CSS3——CSS3之transform属性（DAY7第7课）

五、transform属性

块元素居中显示（transform定位）

1、translate: 以原点为坐标进行移动的方式

transform:translate (-50%,-50%); /以左上角为原点，先左右再上下/

2、2d旋转的效果——transform-origin、transform:rotate

transform-origin:top left; （旋转的中心点，中心点在左上角）
transform:rotate(45deg); （deg表示度数）

3、CSS3的斜切效果

transform:skewX(45deg);
transform:skewY(45deg);

4、图片旋转的效果（头像旋转 过渡效果）

transition:all 2s;（过渡效果，多长时间实现效果）

5、3d沿着X轴底部旋转

transform:rotateX(60deg);
perspective:300px; 透视的宽度

6、放大效果

tansform:scale(0.5); X轴和Y轴都是缩放0.5倍
tansform:scaleX(0.5); X轴缩放0.5倍
tansform:scaleY(0.5); Y轴缩放0.5倍
tansform:scale(2,3); X轴放大2倍,Y轴放大3倍

照片墙案列