1. 前言

上次给大家分享了”css3过渡属性浅析”,链接地址为:http://bbs.itheima.com/thread-385183-1-1.html,本次讲跟大家分享变形属性transform,可以对元素对象进行旋转rotate、缩放scale、移动translate、倾斜skew

2. css3的属性在对不同的浏览器下可能存在兼容性问题

解决方法:可以在css3属性面前加上对应的前缀

3. 旋转rotate

通过 rotate() 方法，元素顺时针旋转给定的角度

取值:角度deg,

正值，元素将顺时针旋转;

负值，元素将逆时针旋转.

测试效果:

4. 缩放scale

对元素进行缩放,可以缩放宽度高度.

取值:数值

4.1. scale(x,y)        改变元素的宽度和高度

4.2. scaleX(n)        改变元素的宽度

4.3. scaleY(n)        改变元素的高度

测试效果:

5. 移动translate

对元素进行移动

取值:

数值,需要带单位,一般单位使用px

5.1. translateX(n)        沿着 X 轴移动元素

5.2. translateY(n)        沿着 Y 轴移动元素

测试效果:

5.3. translate(x,y)        沿着 X 和 Y 轴移动元素

6. 倾斜skew

倾斜元素

取值:角度deg

6.1. skewX(angle)        沿着 X 轴

测试效果:

6.2. skewY(angle)        沿着 Y 轴

测试效果:

6.3. skew(x-angle,y-angle)        沿着 X 和 Y 轴

测试效果:

7. 多种变形效果同时作用

一个元素,可以同时设置多种变形效果,每个效果之间用”空格”隔开

测试效果:

1. 前言

上次给大家分享了”css3过渡属性浅析”,链接地址为:http://bbs.itheima.com/thread-385183-1-1.html,本次讲跟大家分享变形属性transform,可以对元素对象进行旋转rotate、缩放scale、移动translate、倾斜skew

2. css3的属性在对不同的浏览器下可能存在兼容性问题

解决方法:可以在css3属性面前加上对应的前缀

3. 旋转rotate

通过 rotate() 方法，元素顺时针旋转给定的角度

取值:角度deg,

正值，元素将顺时针旋转;

负值，元素将逆时针旋转.

测试效果:

4. 缩放scale

对元素进行缩放,可以缩放宽度高度.

取值:数值

4.1. scale(x,y)        改变元素的宽度和高度

4.2. scaleX(n)        改变元素的宽度

4.3. scaleY(n)        改变元素的高度

测试效果:

5. 移动translate

对元素进行移动

取值:

数值,需要带单位,一般单位使用px

5.1. translateX(n)        沿着 X 轴移动元素

5.2. translateY(n)        沿着 Y 轴移动元素

测试效果:

5.3. translate(x,y)        沿着 X 和 Y 轴移动元素

6. 倾斜skew

倾斜元素

取值:角度deg

6.1. skewX(angle)        沿着 X 轴

测试效果:

6.2. skewY(angle)        沿着 Y 轴

测试效果:

6.3. skew(x-angle,y-angle)        沿着 X 和 Y 轴

测试效果:

7. 多种变形效果同时作用

一个元素,可以同时设置多种变形效果,每个效果之间用”空格”隔开

测试效果: