2D转换
- 作用
- 通过 CSS3 转换,我们能够对元素进行移动、缩放、转动、拉长或拉伸。
- 格式
- rotate();
- translate();
- scale();
- 注意点
- 如果需要进行多个转换, 那么用空格隔开
- 2D的转换模块会修改元素的坐标系, 所以旋转之后再平移就不是水平平移的
rotate()方法
- 通过 rotate() 方法,元素顺时针旋转给定的角度。允许负值,元素将逆时针旋转。
ul li:nth-child(2){
/*其中deg是单位, 代表多少度*/
transform: rotate(45deg);
}
translate()方法
- 通过 translate() 方法,元素从其当前位置移动,根据给定的 left(x 坐标) 和 top(y 坐标) 位置参数
ul li:nth-child(3){
/*
第一个参数:水平方向
第二个参数:垂直方向
*/
transform: translate(100px, 0px);
}
scale()方法
- 通过 scale() 方法,元素的尺寸会增加或减少,根据给定的宽度(X 轴)和高度(Y 轴)参数
ul li:nth-child(4){
/*
第一个参数:水平方向
第二个参数:垂直方向
注意点:
如果取值是1, 代表不变
如果取值大于1, 代表需要放大
如果取值小于1, 代表需要缩小
如果水平和垂直缩放都一样, 那么可以简写为一个参数
*/
/*transform: scale(0.5, 0.5);*/
transform: scale(1.5);
}
形变中心点
- 作用
- 格式
- transform-origin:水平位置 垂直位置;
- 注意点
旋转轴向
- 作用
- 格式
- rotateX()
- rotateY()
- rotateZ()
perspective:;
- 作用
- 注意点
- 透视属性必须添加到需要呈现近大远小效果的元素的父元素上面
网友评论