CSS3--2D转换

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:;

• 作用
  • 添加透视效果(近大远小)
• 注意点
  • 透视属性必须添加到需要呈现近大远小效果的元素的父元素上面