transform
CSS3提供了元素变形效果,也叫做变换。它可以将元素实现旋转、缩放和平移的功能。
transform指定应用的变换功能
transform-origin指定变换的起点
transform的属性值:
none无变换
translate(长度值或百分数值) 两个方向平移元素
translateX(长度值或百分数值) 水平方向平移元素
translateY(长度值或百分数值)垂直方向平移元素。
scale(数值) 两个方向上缩放元素
scaleX(数值) 水平方向上缩放元素
scaleY(数值)垂直方向上缩放元素
rotate(角度)旋转元素
skew(角度) 两个方向上使元素倾斜一定的角度
skewX(角度) 水平方向上使元素倾斜一定的角度
skewY(角度)垂直方向上使元素倾斜一定的角度
matrix(4~6数值,逗号隔开)指定自定义变换。
//向水平和垂直各移动200像素,也可以使用百分比
transform:translate(200px,200px);
//向水平平移200像素,不加后面的0也可以
transform:translate(200px,0);
transform:translateX(200px);
//向垂直平移200像素
transform:translate(0,200px);
transform:translateY(200px);
//水平、垂直方向放大1.5倍
transform:scale(1.5);
transform:scale(1.5,1.5);
//水平、垂直方向缩小0.8倍
transform:scale(0.8,0.8);
//水平方向放大1.5倍
transform:scaleX(1.5);
//垂直方向放大1.5倍
transform:scaleY(1.5);
//旋转元素,0~360度之间,负值均可
transform:rotate(-45deg);
//倾斜元素,0~360度之间,负值均可
transform:skew(45deg,20deg);
//水平倾斜元素,0~360度之间,负值均可
transform:skewX(45deg);
//垂直倾斜元素,0~360度之间,负值均可
transform:skewY(45deg);
//通过六个数值指定矩形,其内部公式计算较为复杂,请百度吧
transform:matrix(1,0,0,1,30,30);
//不同的值可以累计,通过空格分割
transform:rotate(-45deg) scale(1.5);
transform-origin
transform-origin属性可以设置变换的起点。默认情况下,使用元素的中心作为起点。具体设置方案参考如下表:
百分数值指定元素x轴或y轴的起点
长度值指定距离
left center right指定x轴的位置
top center bottom指定y轴的位置
这个属性是用来改变变形的基准点的,默认是在元素的中心位置,如果你改变了基准点。它就会按照这个基准点进行变形。
//默认值,以中心点变形
transform-origin:center center;
transform-origin:50% 50%;
//以左上角为基准点变形
transform-origin:left top;
transform-origin:0px 0px;
浏览器版本
//兼容完整版
-webkit-transform:rotate(45deg);
-moz-transform:rotate(45deg);
-o-transform:rotate(45deg);
-ms-transform:rotate(45deg);
transform:rotate(45deg);
-webkit-transform-origin:left top;
-moz-transform-origin:left top;
-o-transform-origin:left top;
-ms-transform-origin:left top;
transform-origin:left top
3D变形简介
由于3D是立体三维,在x、y轴的基础上一般会多出一个z轴,深入跃出轴。
translate3d(x,y,z)3D方式平移元素,设置x、y和z轴
translateZ(z)设置3D方式平移元素的z轴
scale3d(x,y,z)3D方式缩放一个元素
scaleZ(z)设置3D方式缩放元素的z轴
rotate3d(x,y,z,a)3d方式旋转元素
rotateX(a) rotateY(a) rotateZ(a)分别设置3D方式的旋转元素的x、y和z轴
perspective(长度值)设置一个透视投影矩阵
matrix3d(多个值)定义一个矩阵
//兼容版本完整形式
-webkit-transform:translateZ(200px);
-moz-transform:translateZ(200px);
-o-transform:translateZ(200px);
-ms-transform:translateZ(200px);
transform:translateZ(200px);
transform-style
transform-style属性是指定嵌套元素如何在3D空间中呈现。
flat默认值,表示所有子元素在2D平面呈现。
preserve-3d表示子元素在3D空间中呈现。
//一般设置到当前元素的父元素
transform-style:preserve-3d;
需要再配合后面的功能属性和变形配置,才能看到效果。同样,这个属性也需要加上各种厂商前缀。
perspective
perspective是3D变形的重要属性,该属性会设置查看者的位置,并将可视内容映射到一个视锥上,继而投放到一个2D平面上。
none默认值,表示无限的角度来看3D物体,但看上去是平的。
长度值接受一个长度单位大于0的值,其单位不能为百分比。值越大,角度出现的越远,就好比你人离远一点看物体。值越小,正相反。
//设置查看者的距离位置,一般设置在元素的父元素上
perspective:1000px;
需要再配合后面的功能属性和变形配置,才能看到效果。同样,这个属性也需要加上各种厂商前缀
3D变形属性
我们运用前面3D功能属性transform-style和perspective来构建3D变形效果。
translate3d(x,y,z)
//需要3D位移的HTML结构,必须有父元素包含
<divid="a">
<imgsrc="img.png"alt=""/>
</div>
//CSS部分,父元素设置3D呈现且设置透视距离
#a{
perspective:1000px;
transform-style:preserve-3d;
}
img{
//z轴可以是负值
transform:translate3d(300px,100px,240px);
}
translateZ(z)
//可以单独设置z轴,z轴可以是负值
img{
transform:translateZ(240px);
}
scale3d(x,y,z)
//3D缩放,单独设置无效,需要配合角度
img{
transform:scale3d(1,1,1.5) rotateX(45deg);
}
scaleZ(z)
//单独设置z轴,x和y轴默认为1
img{
transform:scaleZ(1.5) rotateX(45deg);
}
rotate3d(x,y,z,a)
//设置3D旋转,a表示角度,xyz是0或1之间的数值
transform:rotate3d(1,0,0,45deg);
rotateX(a)、rotateY(a)、rotateZ(a)
//单独设置3D旋转
transform:rotateX(45deg);
transform:rotateY(45deg);
transform:rotateZ(45deg);
transform:rotateX(45deg) rotateY(45deg) rotateZ(45deg);