web学习:05-CSS3转换

1.CSS3 Transform

web学习:05-CSS3转换_第1张图片

2.CSS3 2D转换

2.1 rotate 旋转角度


web学习:05-CSS3转换_第2张图片

web学习:05-CSS3转换_第3张图片

web学习:05-CSS3转换_第4张图片

web学习:05-CSS3转换_第5张图片

2.2 scale 缩放


web学习:05-CSS3转换_第6张图片

web学习:05-CSS3转换_第7张图片

web学习:05-CSS3转换_第8张图片

web学习:05-CSS3转换_第9张图片

web学习:05-CSS3转换_第10张图片

web学习:05-CSS3转换_第11张图片

web学习:05-CSS3转换_第12张图片

web学习:05-CSS3转换_第13张图片

2.3 扭曲skew


web学习:05-CSS3转换_第14张图片

web学习:05-CSS3转换_第15张图片

web学习:05-CSS3转换_第16张图片

web学习:05-CSS3转换_第17张图片
web学习:05-CSS3转换_第18张图片

web学习:05-CSS3转换_第19张图片

3.CSS3 3D转换

3.1 CSS3 rotate3d()


web学习:05-CSS3转换_第20张图片
1

web学习:05-CSS3转换_第21张图片
2

web学习:05-CSS3转换_第22张图片

3.2 CSS3 translate3d()


web学习:05-CSS3转换_第23张图片

3.3 CSS3 scale3d()


web学习:05-CSS3转换_第24张图片

4.CSS3 Transform与坐标系统

web学习:05-CSS3转换_第25张图片

web学习:05-CSS3转换_第26张图片

web学习:05-CSS3转换_第27张图片

5.CSS3 矩阵

5.1 矩阵的概念


web学习:05-CSS3转换_第28张图片

web学习:05-CSS3转换_第29张图片

5.2 矩阵的应用


web学习:05-CSS3转换_第30张图片

6.CSS3 扩展属性

6.1 transform-style


web学习:05-CSS3转换_第31张图片

web学习:05-CSS3转换_第32张图片

6.2 perspective


web学习:05-CSS3转换_第33张图片

perspective-origin // 透视点
6.3 backface-visibility
web学习:05-CSS3转换_第34张图片

web学习:05-CSS3转换_第35张图片

你可能感兴趣的:(web学习:05-CSS3转换)