CSS3转换

标签：CSS3 转换定义缩放元素 2D 移动 3D

简介

CSS transform 属性允许你旋转，缩放，倾斜或平移给定元素。这是通过修改 CSS 视觉格式化模型的坐标空间来实现的。

转换( transform) 你可以简单理解为变形。只能转换由盒模型定位的元素（display: block;）。

移动：translate
旋转：rotate
缩放：scale
倾斜：skew
矩阵变换：matrix

3D 特点

近大远小。
物体后面遮挡不可见

三维坐标系

x轴：水平方向，右边是正值，左边是负值
y轴：竖直方向，下面是正值，上面是负值
z轴：垂直屏幕，往外面是正值，往里面是负值

透视

如果想要在网页产生 3D 效果，需要透视。
父盒子有了透视才能看到 Z轴方向引起的变化。
透视也称为视距，就是人的眼睛到屏幕的距离。
透视越小，在电脑平面成像越大，立体感更好；透视越大，在电脑平面成像越小。

/* 透视需要写在被观察元素的父盒子上面*/ 
/* 透视的单位是像素 */
perspective: 200px;

translate移动

沿着X、Y轴移动元素
元素依然会占据其原始空间，不会影响网页其它元素的布局
移动距离设为，百分比是相对于自身
对行内标签无效

2D移动

translate(x,y) 定义 2D 移动，沿着 X 和 Y 轴移动元素
translateX(n)  定义 2D 移动，沿着 X 轴移动元素
translateY(n)  定义 2D 移动，沿着 Y 轴移动元素

3D移动

translate3D(x,y,z) 定义 3D 移动
translateX(x)      定义 3D 移动，仅使用用于 X 轴的值
translateY(y)      定义 3D 移动，仅使用用于 Y 轴的值
translateZ(z)      定义 3D 移动，仅使用用于 Z 轴的值

rotate旋转

设置元素转换的中心点。语法：transform-origin: x y;
rotate里面跟度数，单位是 deg，比如rotate(45deg)
角度为正时，顺时针旋转；角度为负时，逆时针旋转
默认旋转的中心点是元素的中心点
不影响其他盒子的布局

2D旋转

rotate(deg)  定义 2D 旋转，在参数中规定角度,以Z轴为旋转轴

3D旋转

rotate3D(x,y,z,deg);
rotateX(deg)  函数功能等同于rotate3D(1,0,0,par) 以X轴为旋转轴
rotateY(deg)  函数功能等同于rotate3D(0,1,0,par) 以Y轴为旋转轴
rotateZ(deg)  函数功能等同于rotate3D(0,0,1,par) 以Z轴为旋转轴

scale缩放

transform-origin: x y; 设置缩放中心点
默认以中心缩放
不影响其他盒子的布局

2D缩放

scale(x,y)  定义 2D 缩放，改变元素的宽度和高度 
scaleX(n)   定义 2D 缩放，改变元素的宽度 
scaleY(n)   定义 2D 缩放，改变元素的高度

3D缩放

scale3D(x,y,z)   定义 3D 缩放
scaleX(x)        定义 3D 缩放，通过给定一个 X 轴的值
scaleY(y)        定义 3D 缩放，通过给定一个 Y 轴的值
scaleZ(z)        定义 3D 缩放，通过给定一个 Z 轴的值

skew倾斜

该函数定义了一个元素在二维平面上的倾斜转换，可用于实现平行四边形

skew(x,y)使元素在水平和垂直方向同时扭曲（X轴和Y轴同时按一定的角度值进行扭曲变形）
skewX(x)仅使元素在水平方向扭曲变形（X轴扭曲变形）
skewY(y)仅使元素在垂直方向扭曲变形（Y轴扭曲变形）

转换综合写法

transform: translate(50%,.50%) rotate(45deg) scale(2);

同时使用多个转换，其格式为：transform: translate(50%,.50%) rotate(45deg) scale(2);
其顺序会影转换的效果。先旋转会改变坐标轴方向。
当我们同时有位移和其他属性的时候，记得要将位移放到最前。

matrix矩阵变换

matrix()是CSS的transform的一个基础属性，用它可以实现很多高级、复杂的效果，实际上transfrom的translate、rotate等都是在matrix的基础上实现的简化版的语法。

CSS 函数 matrix() 指定了一个由指定的 6 个值组成的 2D 变换矩阵。这种矩阵的常量值是隐含的，而不是由参数传递的；其他的参数是以列优先的顺序描述的。

详情请参考：https://www.cnblogs.com/engeng/p/15156881.html

标签：CSS3,转换,定义,缩放,元素,2D,移动,3D
From： https://www.cnblogs.com/qianduanLamp/p/16714488.html

简介