第 24 章 CSS3 变形效果[上]
学习要点:
1.transform
2.transform-origin
3.浏览器版本
本章主要探讨 HTML5 中 CSS3 的变形效果,通过变形效果,可以平移、缩放和旋转元
素的功能。
一.transform
CSS3 提供了元素变形效果,也叫做变换。它可以将元素实现旋转、缩放和平移的功能。
属性有两个:transform 和 transform-origin。
属性 说明
transform
指定应用的变换功能
transform-origin
指定变换的起点
对于 transform 的属性值,具体如下表:
属性值 说明
none
无变换
translate(长度值或百分数值)
translateX(长度值或百分数值)
translatY(长度值或百分数值)
在水平方向、垂直方向或两个方向上平移
元素。
scale(数值)
scaleX(数值)
scaleY(数值)
在水平方向、垂直方向或两个方向上缩放
元素
rotate(角度) 旋转元素
skew(角度)
skewX(角度)
skewY(角度)
在水平方向、垂直方向或两个方向上使元
素倾斜一定的角度
matrix(4~6 数值,逗号隔开) 指定自定义变换。
//向水平和垂直各移动 200 像素,也可以使用百分比
transform: translate(200px,200px);
//向水平平移 200 像素,不加后面的 0 也可以