过渡方法:常和伪元素搭配使用,比如,鼠标悬停停在div上时,div由一种样式转变成另一种样式。
必须指定要添加效果的CSS属性(eg:width、height等)
必须指定效果的持续时间。
给div先设置基本样式 div{ width:100px;
height:100px;
background:red;
transition:all 3s linear 2s;
(过渡名称、花费的时间、曲线、延迟开始的时间)
//有些事件,若只写这里而不给下面写的话,当过渡完成后,
不会自动回到原来的div状态,所以我们也需要在上面给它添加过渡
(然后hover不用)
需要做兼容处理的话再加-webkit- /-o- / -ms- / -moz- transition
}
div:hover{
width:400px;
height:400px;
background:blue; }
2D转换
变换方法有
transform+ translate()、rotate()、scale()、skew()、matrix()
注意
[2d 3d 同]
Chrome 和 Safari 要求前缀 -webkit- 版本..
Internet Explorer 9 要求前缀 -ms- 版本…
1、translate()方法, 【平移】
根据左(X轴)和顶部(Y轴)位置给定的参数,从当前元素位置移动。
div { transform: translate(50px,100px); -ms-transform: translate(50px,100px); -webkit-transform: translate(50px,100px); }
2、rotate()方法 【旋转】
在一个给定度数顺时针旋转的元素。负值是允许的,这样是元素逆时针旋转。
transform: rotate(30deg);
//rotate值(30deg)元素顺时针旋转30度。
3、scale()方法 【缩放】
该元素增加或减少的大小,取决于宽度(X轴)和高度(Y轴)的参数:
transform: scale(2,3);
/* scale(2,3)转变宽度为原来的大小的2倍,和其原始大小3倍的高度。*/
4、skew() 方法 【倾斜】
用法: transform:skew(< angle> [,< angle>]); //角度单位为deg
transform: skew(30deg,20deg); //元素在X轴和Y轴上倾斜20度30度
5、matrix() 方法 【方法合并】
matrix()方法和2D变换方法合并成一个。
matrix() 方法有六个参数,包含旋转,缩放,移动(平移)和倾斜功能。
函数 描述
函数 | 描述 |
---|---|
matrix(n,n,n,n,n,n) | 定义 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 缩放转换,改变元素的高度。 |
rotate(angle) | 定义 2D 旋转,在参数中规定角度。 |
skew(x-angle,y-angle) | 定义 2D 倾斜转换,沿着 X 和 Y 轴。 |
skewX(angle) | 定义 2D 倾斜转换,沿着 X 轴。 |
skewY(angle) | 定义 2D 倾斜转换,沿着 Y 轴。 |
3D
transform+以下方法
rotateX() 方法。围绕其在一个给定度数X轴
旋转的元素。
rotateY()方法。围绕其在一个给定度数Y轴
旋转的元素。
div
{
transform: rotateX(120deg);
-webkit-transform: rotateX(120deg); /* Safari 与 Chrome */
}
详见请点击跳转
3D转换属性