首页 > 程序开发 > web前端 > HTML/CSS >

css3变形效果3D

2017-01-17

css3变形效果3D。由于3D是立体三维,在x、y轴的基础上一般会多出一个z轴,深入跃出轴。

由于3D是立体三维,在x、y轴的基础上一般会多出一个z轴,深入跃出轴。

要使用transform实现3D效果,首先需要为该元素或该元素的直接父元素设置如下2个属性属性

1、transform-style 该属性是指定嵌套元素如何在3D空间中呈现

属性值: flat 默认值,表示所有子元素在2D平面呈现

preserve-3d 表示子元素在3D空间呈现

2、perspective 该属性会设置查看者的位置,并将可视内容映射到一个视锥上,继而

投放到一个2D平面上。

属性值: none 默认值,表示无限的角度来看3D物体,但看上去是平的

长度值 接受一个长度单位大于0的值,其单位不能为百分比。值越大,角

度出现的越远,3D物体越小,直至3D原有的大小

以上两个属性的示例如下:

eg. div{

perspective:1000px;

transform-style:preserve-3d;

}

注意:上面的两个值设置在该元素,或该元素的直接父元素中,显示的效果是不一样的。

一、translate3d(x,y,z) 必须写三个参数,且这三个参数可以为负值

eg. img{

transform:translate3d(100px,100px,300px);

}

还可以直接写translateZ(),这样默认x和y轴的值为0

eg. img{

transform:translateZ(-300px);

}

二、scale3d(x,y,z) 3D缩放,单独设置无效,需要配合角度

eg. img{

transform:scale3d(1,1,1.5) rotateX(45deg);

}

scaleZ(z) 单独设置z轴,x和y轴默认为1

eg. img{

transform:scaleZ(1.5) rotateX(45deg);

}

三、rotate3d(x,y,z,a) 设置3D旋转,a表示角度,xyz是0或1之间的数值

eg. img{

transform:rotate3d(1,0,0,45deg);

}

rotateX(a)、rotateY(a)、rotateZ(a) 单独设置3D旋转,可以分开写,也可写在一起

eg. img{

//transform:rotateX(45deg);

transform:rotateX(45deg) rotateY(45deg) rotateZ(45deg);

}

perspective-origin 改变3D元素变形的基准点,默认是元素的中心位置,如果改变了基准点。

它就会按照这个基准点进行变形。

属性值可以使用关键字,也可以使用百分数和具体值

关键字如下:

1、指定x轴的位置 left、center、right

2、指定y轴的位置 top、center、bottom

eg. div{

perspective-origin:left top;

perspective-origin:0px 0px;

perspective-origin:0% 0%;

}

注意:transform和transform-origin要求的版本比较高,所以除了标准的,最好写上带前缀的。

相关文章
最新文章
热点推荐