一、Transform转换
让一个元素在一个坐标系统中变形。这个属性包含一系列变形函数，可以移动、旋转和缩放元素。
语法
transform: none | <transform-function> [<tranform-function>]*; ps：当要使用多个转换方法的时候中间是用空格隔开
| transform-function | 说明 |
|---|---|
| none | 无转换 |
| 2D Transform Functions | |
| matrix() | 以一个含六值的(a,b,c,d,e,f)变换矩阵的形式指定一个2D变换，相当于直接应用一个[a,b,c,d,e,f]变换矩阵 |
| translate() | 指定对象的2D translation（2D平移）。第一个参数对应X轴，第二个参数对应Y轴。如果第二个参数未提供，则默认值为0 |
| translatex() | 指定对象X轴（水平方向）的平移 |
| translatey() | 指定对象Y轴（垂直方向）的平移 |
| rotate() | 指定对象的2D rotation（2D旋转），需先有 <’ transform-origin ‘> 属性的定义 |
| scale() | 指定对象的2D scale（2D缩放）。第一个参数对应X轴，第二个参数对应Y轴。如果第二个参数未提供，则默认取第一个参数的值 |
| scalex() | 指定对象X轴的（水平方向）缩放 |
| scaley() | 指定对象Y轴的（垂直方向）缩放 |
| skew() | 指定对象skew transformation（斜切扭曲）。第一个参数对应X轴，第二个参数对应Y轴。如果第二个参数未提供，则默认值为0 |
| skewx() | 指定对象X轴的（水平方向）扭曲 |
| skewy() | 指定对象Y轴的（垂直方向）扭曲 |
| 3D Transform Functions | |
| matrix3d() | 以一个4x4矩阵的形式指定一个3D变换 |
| translate3d() | 指定对象的3D位移。第1个参数对应X轴，第2个参数对应Y轴，第3个参数对应Z轴，参数不允许省略 |
| translatez() | 指定对象Z轴的平移 |
| rotate3d() | 指定对象的3D旋转角度，其中前3个参数分别表示旋转的方向x,y,z，第4个参数表示旋转的角度，参数不允许省略 |
| rotatex() | 指定对象在x轴上的旋转角度 |
| rotatey() | 指定对象在y轴上的旋转角度 |
| rotatez() | 指定对象在z轴上的旋转角度 |
| scale3d() | 指定对象的3D缩放。第1个参数对应X轴，第2个参数对应Y轴，第3个参数对应Z轴，参数不允许省略 |
| scalez() | 指定对象的z轴缩放 |
| perspective() | 指定透视距离 |
（一）2D转换
1.旋转 （rotate）
通过指定的角度对元素进行2D旋转。
语法
-webkit-transform: rotate(angle);
-moz-transform: rotate(angle);
-ms-transform: rotate(angle);
-o-transform: rotate(angle);
transform: rotate(angle);angle：指定旋转的角度，正数表示顺时针旋转，负数表示逆时针旋转。
案例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>2D旋转rotate</title>
<style>
*{
margin: 0;padding: 0;}
img{
border: 0;}
.main{
width: 1000px;margin: 50px auto;position: relative;}
.pic{
width: 300px;height: 290px;border: 1px solid #ccc;background: #FFF;position: absolute;}
.pic img{
margin: 10px auto 5px;width: 285px;height: 240px;display: block;}
.pic p{
text-align: center;height: 35px;line-height: 35px;
最低0.47元/天 解锁文章
411
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
