html+css+js基础内容（四）

本文链接：https://blog.csdn.net/u014657752/article/details/124291748

1.变形(transform）
translate(x,y) 定义 2D 转换，沿着 X 和 Y 轴移动元素。位移效果
translateX(n) 定义 2D 转换，沿着 X 轴移动元素。
translateY(n) 定义 2D 转换，沿着 Y 轴移动元素。

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

rotate(angle) 定义 2D 旋转，在参数中规定角度（-360deg - 360deg）。旋转效果

skew(x-angle,y-angle) 定义 2D 倾斜转换，沿着 X 和 Y 轴。变形效果
skewX(angle) 定义 2D 倾斜转换，沿着 X 轴。
skewY(angle) 定义 2D 倾斜转换，沿着 Y 轴。

matrix(a,b,c,d,e,f) 定义 2D变形，使用了6个值的矩阵。表示如下：
a c e
b d f
0 0 1

matrix用一个3行3列的矩阵表示，a和b列表示x轴，c和d列表示y轴，e和f列表示z轴
a和d表示缩放（如果没有缩放，值设为1）
b和c表示扭曲（如果没有扭曲，值为0）
e和f表示位移（如果没有位移，值为0）

如果旋转角度为θ,它会影响到a,b,c,d的值：
a = cosθ
b = sinθ
c = -sinθ
d = cosθ
如果扭曲skew(θ1,θ2)，会影响到b和c的值：
b = tanθ1
c = tanθ2

每次旋转和扭曲都会产生一个新矩阵，最终形成的多个矩阵要做乘法运算。
如果对一个元素同时有旋转、扭曲、缩放和位移，这里需要用到多个矩阵相乘，要优先考虑旋转和缩放！！！
2.transform-origin：调整元素的基点。
transform-origin: x-axis y-axis z-axis;
属性值：
x-axis ：定义视图被置于 X 轴的何处。可能的值：left，center，right，length，%。
y-axis ：定义视图被置于 Y 轴的何处。可能的值：top，center，bottom，length，%。
z-axis ：定义视图被置于 Z 轴的何处。可能的值：length。
3.perspective
让子元素获得透视效果。
perspective:length|none;

主流浏览器都不支持，谷歌要加-webkit-，或在长度后加单位。

4. transform-style
在3D空间中呈现被嵌套的元素(必须与 transform 属性一同使用)。

transform-style: flat|preserve-3d;

5.rotateZ
沿着Z轴的方向顺指针旋转。

6.transition:过渡动画
1）常规用法：
transition-property
transition-duration
transition-timing-function
transition-delay
2）简洁（复合）用法：
transition: property-name-list|all duration timing-function delay;

a）可以使用的属性有：
i)颜色：
color background-color border-color outline-color
ii)位置：
background-position left right top bottom
iii)长度：
max-height min-height max-width min-width height width
border-width margin padding outline-width outline-offset
font-size line-height text-indent vertical-align
border-spacing letter-spacing word-spacing
iv)数字：
opacity visibility z-index font-weight zoom
v)组合：
text-shadow transform box-shadow clip
vi)其它
gradient
b)duration:动画持续时间，一般以秒(s)或毫秒(ms)为单位
c)timing-function:动画函数
i)linear:匀速
ii)ease:变速（先慢后快，最后再慢）
iii)ease-in:变速（由慢到快）
iv)ease-out:变速（由快到慢）
v)ease-in-out:变速（慢速开始，慢速结束）
vi)cubic-bezier(n,n,n,n):自行设定变速，n的值在0-1之间
d)delay:动画延时时间，一般以秒(s)或毫秒(ms)为单位