导读
- 变化属性
单词
- transform 变换、转换、变形
- origin：起源、源头
- perspective：透视
- translate：移动（本意是翻译）
- scale：缩放
- rotate：旋转
- skew：倾斜、斜切
transform属性
定义：定义元素的变换。允许你移动、旋转、缩放、倾斜。
translate()函数
定义：translate()函数用于对元素进行移动变换。
div{
transform: translateX();
transform: translateY();
transform: translateZ();
}
perspective
定义：定义Z轴原点到屏幕的距离。开启3D空间上下文。（Z轴是垂直屏幕的轴）
特征：大透视小变换；小透视大变换。
语法
父元素{
perspective: none | px | em ;
}
属性值：
- none：不开启透视。默认值
-- 长度值：
通过使用 CSS transform 属性，您可以利用以下2D 转换方法：
translate(x,y) 定义 2D 转换，(沿着 X 和 Y 轴移动元素。)
translateX(n) 定义 2D 转换，(沿着 X 轴移动元素。)
translateY(n) 定义 2D 转换，(沿着 Y 轴移动元素。)
scale(x,y) 定义 2D 缩放转换，(改变元素的宽度和高度。)
scaleX(n) 定义 2D 缩放转换，(改变元素的宽度。)
scaleY(n) 定义 2D 缩放转换，(改变元素的高度。)
skew(x-angle,y-angle) 定义 2D 倾斜转换，(沿着 X 和 Y 轴。)
skewX(angle) 定义 2D 倾斜转换，(沿着 X 轴。)
skewY(angle) 定义 2D 倾斜转换，(沿着 Y 轴。)
rotate(angle) 定义 2D 旋转，(在参数中规定角度。)
透视
透视指在平面上描绘物体的空间关系的方法。
透视的特定：
1.近大远小
2.近快远慢
3.近实远虚
变形属性
- transform 向元素应用3D 转换。
- transform-origin 允许你改变被转换元素的位置。
- transform-style 规定被嵌套元素如何在 3D 空间中显示。
- perspective 规定 3D 元素的透视效果。
- perspective-origin 规定 3D 元素的底部位置。
- backface-visibility 定义元素在不面对屏幕时是否可见。
记住z轴！！！ 垂直屏幕的轴
1.jpg
