css3转换
1、css32D转换
2D变换方法：
translate()
rotate()
scale()
skew()
matrix()
（1）translate() 平移 方法，根据左(X轴)和顶部(Y轴)位置给定的参数，从当前元素位置移动。 （百分比 偏移量除以本身得x或y轴）
div{
transform:translate(50px,100px);//第一x轴，第二y轴
}
（2）rotale（）方法 旋转
rotate()方法，正值顺时针旋转的元素。负值，元素逆时针旋转。
div{
transform:rotate(30deg);
}
（3）scale()方法，该元素增加或减少的大小，取决于宽度（X轴）和高度（Y轴）的参数：
scale（2,3）
scale（2,3）转变宽度为原来的大小的2倍，和其原始大小3倍的高度。
（4）skew（）方法 变形
包含两个参数值，分别表示X轴和Y轴倾斜的角度，如果第二个参数为空，则默认为0，参数为负表示向相反方向倾斜。
skewX(<angle>);表示只在X轴(水平方向)倾斜。
skewY(<angle>);表示只在Y轴(垂直方向)倾斜。
div{transform:skew(30deg,20deg);}
skew(30deg,20deg)元素在X轴和Y轴上倾斜20度30度。
2.CSS33D转
使用3d转换前 要先进行转换
(1)、3D转换
rotateX()方法
rotateX()方法，围绕其在一个给定度数X轴旋转的元素。
div{
transform:rotateX(120deg);
}
rotateY()方法
div{
transform:rotateY(130deg);
}3(1) 3D 转换其他方法
|
函数 |
描述 |
|
matrix3d(n,n,n,n,n,n, |
定义 3D 转换，使用 16 个值的 4x4 矩阵。 |
|
translate3d(x,y,z) |
定义 3D 转化。 |
|
translateX(x) |
定义 3D 转化，仅使用用于 X 轴的值。 |
|
translateY(y) |
定义 3D 转化，仅使用用于 Y 轴的值。 |
|
translateZ(z) |
定义 3D 转化，仅使用用于 Z 轴的值。 |
|
scale3d(x,y,z) |
定义 3D 缩放转换。 |
|
scaleX(x) |
定义 3D 缩放转换，通过给定一个 X 轴的值。 |
|
scaleY(y) |
定义 3D 缩放转换，通过给定一个 Y 轴的值。 |
|
scaleZ(z) |
定义 3D 缩放转换，通过给定一个 Z 轴的值。 |
|
rotate3d(x,y,z,angle) |
定义 3D 旋转。 |
|
rotateX(angle) |
定义沿 X 轴的 3D 旋转。 |
|
rotateY(angle) |
定义沿 Y 轴的 3D 旋转。 |
|
rotateZ(angle) |
定义沿 Z 轴的 3D 旋转。 |
|
perspective(n) |
定义 3D 转换元素的透视视图。 |
动画得元素
|
属性 |
描述 |
CSS |
|
规定动画。 |
3 |
|
|
所有动画属性的简写属性，除了 animation-play-state 属性。 |
3 |
|
|
规定 @keyframes 动画的名称。 |
3 |
|
|
规定动画完成一个周期所花费的秒或毫秒。默认是 0。 |
3 |
|
|
规定动画的速度曲线。默认是 "ease"。 |
3 |
|
|
规定当动画不播放时（当动画完成时，或当动画有一个延迟未开始播放时），要应用到元素的样式。 |
3 |
|
|
规定动画何时开始。默认是 0。 |
3 |
|
|
规定动画被播放的次数。默认是 1。 |
3 |
|
|
规定动画是否在下一周期逆向地播放。默认是 "normal"。 |
3 |
|
|
规定动画是否正在运行或暂停。默认是 "running"。 |
div {
animation-name: myfirst;
animation-duration: 5s;
animation-timing-function: linear;
animation-delay: 2s;
animation-iteration-count: infinite;
animation-direction: alternate;
animation-play-state: running; /* Safari 与 Chrome: */
}
简写
div {
animation: myfirst 5s linear 2s infinite alternate; /* Safari 与 Chrome: */
}