CSS3之transform属性(转换)
学习转换之前先看下图
一、平移translate函数
1、translate()函数
作用:在水平和/或垂直方向上重新定位元素。
.box1,.box2{
width: 200px;
height: 100px;
background-color: #ccc;
margin-top: 10px;
}
.box2{
/* x轴(横向)平移40px;y轴(向下)平移60px */
transform: translate(40px,60px);
/* x轴平移-50px(向左) */
transform: translate(-50px);
}
<div class="box1">1</div>
<div class="box2">2</div>
2、translateX()函数
作用:表示在二维平面上水平方向移动元素。
.box1,.box2{
width: 200px;
height: 100px;
background-color: #ccc;
margin-top: 10px;
}
.box1{
/* box1在水平方向平移了一个自身宽度(百分比)的距离
百分比是相对于盒子宽度的值
*/
transform: translateX(100%);
}
<div class="box1">1</div>
<div class="box2">2</div>
3、translateY()函数
作用:表示在二维平面上垂直方向移动元素。
.box1,.box2{
width: 200px;
height: 100px;
background-color: #ccc;
margin-top: 10px;
}
.box1{
/* box1在垂直方向平移了自身高度20%的距离
百分比是相对于盒子高度的值
*/
transform: translateY(-20%);
}
4、translateZ()函数
作用:表示在三维平面上**垂直方向(z轴)**移动元素。
.box2{
background-color: #999;
/* perspective透视视图(近大远小)函数的数值越小,离屏幕越近,反之越远 */
/* translateZ(-20px)第二个div会向屏幕内部(z轴)平移20px */
transform: perspective(100px) translateZ(-20px);
}
<div class="box">div的内容</div>
<div class="box2">div的内容2</div>
<div class="box3">div的内容3</div>
浏览器效果:
5、translate3d()函数
需要结合perspective()函数使用,才能看到效果:
.box,.box2,.box3{
width: 120px;
height: 100px;
background-color: #ccc;
margin: 0 auto;
margin-top: 5px;
}
.box2{
background-color: #999;
/* perspective透视视图(近大远小)函数的数值越小,里的越近 */
/* x轴平移0px,y轴平移30px,z轴平移20px */
transform: perspective(100px) translate3d(0px,30px,20px);
}
<div class="box">div的内容</div>
<div class="box2">div的内容2</div>
<div class="box3">div的内容3</div>
浏览器效果:
二、scale缩放函数
1、scale()函数
作用:放大或缩小元素。
.box:hover{
/* 以下表示不缩放 */
transform: scale(1);
/* 以下表示放大1.5倍(x轴和y轴都会变化) */
transform: scale(1.5);
/* 以下表示缩小0.5倍(x轴和y轴都会变化) */
transform: scale(0.5);
/* 以下两个参数,表示x轴是1不变,y轴放大1.2倍 */
transform: scale(1,2);
/* 以下两个参数,表示x轴是放大2倍,y轴不变 */
transform: scale(2,1);
}
<div class="box">
盒子内容
</div>
2、scaleX()函数
/* 表示元素在x轴上放大2倍 */
transform: scaleX(2);
3、scaleY()函数
/*表示在Y轴上缩小0.5倍 */
transform: scaleY(0.5);
三、rotate()函数
作用:将元素围绕一个定点旋转而不变形的转换。若角度为正,则顺时针方向旋转,否则逆时针方向旋转。
1、rotate(d)
**1)作用:**元素绕Z轴旋转d值的角度,d表示旋转角度
2)案例:
/* 元素在鼠标移入的时候,绕z轴逆时针旋转40度 */
.box:hover{
transform:perspective(500px) rotate(-40deg);
}
2、rotateX(d)
**1)作用:**元素绕X轴旋转d值的角度。
2)案例:
/* 元素在鼠标移入的时候,绕X轴顺时针旋转45度 */
.box:hover{
transform:perspective(500px) rotateX(45deg);
}
3、rotateY(d)
**1)作用:**元素绕Y轴旋转d值的角度。
2)案例:
/* 元素在鼠标移入的时候,绕Y轴顺时针旋转45度 */
.box:hover{
transform:perspective(500px) rotateY(45deg);
}
4、rotate3d()函数
**1)作用:**将元素围绕固定轴旋转
**2)语法:**rotate3d(x,y,z,a)
3)值:
-
x
数值类型,可以是 0 到 1 之间的数值,表示旋转轴 X 坐标方向的矢量。
-
y
数值类型类型,可以是 0 到 1 之间的数值,表示旋转轴 Y 坐标方向的矢量。
-
z数值类型 类型,可以是 0 到 1 之间的数值,表示旋转轴 Z 坐标方向的矢量。
-
a
-
角度 类型,表示旋转角度。正的角度值表示顺时针旋转,负值表示逆时针旋转。
四、skew()函数
1、skew()
**1)作用:**元素在二维平面上的倾斜转换。
2)语法:
skew(xa[,ya]) xa参数表示的是x轴倾斜的角度;ya是可选参数(表示向y轴倾斜的角度)
**注意:**值可以是正角度值和负角度值。
3)案例:
.box{
/* 20deg表示向x轴倾斜20度,10deg表示向y轴倾斜10度 */
transform: skew(20deg,10deg);
/* 只有一个参数,表示向x轴倾斜40度,*/
transform: skew(40deg);
}
2、skewX()
**1)作用:**元素在二维平面上的向x轴倾斜。
2)语法:
skewX(xa) xa参数表示向x轴倾斜的角度。
3)案例:
/* 元素沿着x轴(水平)方向,向右倾斜20度 */
transform: skewX(-20deg);
3、skewY()
**1)作用:**元素在二维平面上的向Y轴倾斜。
2)语法:
skewY(ya) ya参数表示向y轴倾斜的角度。
3)案例:
/* 应用此属性的元素沿着Y轴,向下倾斜20度 */
transform: skewY(20deg);
4、perspective(n)
**1)作用:**使用者能够通过透视原理,更直观的看到元素。
**2)值:**n是一个距离参数,可以理解为用户距离元素的距离;值越大视角越远。
3)案例:
.box2{
width: 200px;
height: 200px;
background-color: #aa55ff;
transform: perspective(500px) rotateX(40deg);
}
<div class="box">box</div>
<div class="box2">box2</div>
浏览器效果:
以下是perspective(800px)的效果:
以下是perspective(200px)的效果:
transform-orangin(待更)