css3 perspective属性介绍
2017-07-17 15:04
411 查看
当你只设置
现在我们试试perspective属性。我们设置perspect=400px。
可以明显的看出加了perspective,会使元素呈现3D效果。
其实可以将元素和perspective比作成在照相,元素是拍摄的物体,而perspective是镜头,有近大远小的显示方式,镜头方向只能是垂直于Z轴向屏幕内,也就是从屏幕正前方向里看。
可以调整镜头与平面位置:
a) perspective属性设置镜头到元素平面的距离。所有元素都是放置在z=0的平面上。比如perspective(300px)表示,镜头距离元素表面的位置是300像素。
b) perspective-origin属性规定了镜头在平面上的位置。默认是放在元素的中心。
当你设置的perspective越大时,就相当于镜头离物体越远,拍摄的旋转程度就越小,当无限大时,就会出现图1中的效果了,当与物体的距离适当时,就能清晰地看出物体的旋转。
不过在chrome中发现一个问题,那就是perspective一定要在rotateY(或rotateX)的前面。如果代码写成下面的情况,perspective的设置会无效。
在FireFox中也是这种情况。
当perspective的属性值为
perspective有两种写法:
1).放在应用元素的父元素上 2).放在应用的元素上
下图左边为perspective属性的效果,右边为transform:perspective()的效果
可以明显看出差别,左边那张9个框相当于用一个照相机照下来的,而右边9个框相当于每个框用一台专属照相机拍下来的,这就是区别。
这个属性指的是当你旋转到元素的正面朝上时,如图
把
div1和div2都背部朝上时,
其中
也就是说,如果对一个元素设置了
上例中,父元素没有设置preserve-3d,子元素旋转90度
子元素消失了,所有可以说明是以页面为轴线
给父元素加上preserve-3d,再将子元素旋转的角度变成30度,变成如图
子元素旋转的角度加上父元素旋转的角度是90度,上图正好显示出子元素旋转的正是90度,所以加上preserve-3d,是以父元素旋转之后父元素的页面为轴线
有一点需要特别提醒大家,如果你的元素设置
rotateX( angle )
rotateY( angle )
rotateZ( angle )这三个方法的时候,他看上去像2d的,实际上是3D的,
比如
<div id="animateTest" > <img src="http://imgcache.qq.com/ptlogin/head/1_100.gif" width="100" height="100"> </div> <div id="animateTest" style="-webkit-transform: rotateY(40deg);"> <img src="http://imgcache.qq.com/ptlogin/head/1_100.gif" width="100" height="100"> </div>第一张图是原始状态的DIV,第二张图是旋转后的效果。
图1:
现在我们试试perspective属性。我们设置perspect=400px。
<div id="animateTest" style="-webkit-transform: perspective(400px) rotateY(40deg);"> <img src="http://imgcache.qq.com/ptlogin/head/1_100.gif" width="100" height="100"> </div>图2:
可以明显的看出加了perspective,会使元素呈现3D效果。
其实可以将元素和perspective比作成在照相,元素是拍摄的物体,而perspective是镜头,有近大远小的显示方式,镜头方向只能是垂直于Z轴向屏幕内,也就是从屏幕正前方向里看。
可以调整镜头与平面位置:
a) perspective属性设置镜头到元素平面的距离。所有元素都是放置在z=0的平面上。比如perspective(300px)表示,镜头距离元素表面的位置是300像素。
b) perspective-origin属性规定了镜头在平面上的位置。默认是放在元素的中心。
当你设置的perspective越大时,就相当于镜头离物体越远,拍摄的旋转程度就越小,当无限大时,就会出现图1中的效果了,当与物体的距离适当时,就能清晰地看出物体的旋转。
不过在chrome中发现一个问题,那就是perspective一定要在rotateY(或rotateX)的前面。如果代码写成下面的情况,perspective的设置会无效。
<div id="animateTest" style="-webkit-transform: rotateY(40deg) perspective(400px);">
在FireFox中也是这种情况。
当perspective的属性值为
0
或负值或
none(none是默认值)时,没有透视效果的。就是2D效果
perspective有两种写法:
1).放在应用元素的父元素上 2).放在应用的元素上
<div class="parent perspective"> <h1>Using perspective property on parent</h1> <div class="child"></div> <!--......--> </div> <div class="parent transform"> <h1>Using transform: perspective() on children</h1> <div class="child"></div> <!--......--> </div>
.parent.perspective { perspective: 50em; } .parent.perspective .child { transform: rotateX(50deg); background: tomato; } .parent.transform .child { transform: perspective(50em) rotateX(50deg); background: deepskyblue; }
下图左边为perspective属性的效果,右边为transform:perspective()的效果
可以明显看出差别,左边那张9个框相当于用一个照相机照下来的,而右边9个框相当于每个框用一台专属照相机拍下来的,这就是区别。
backface-visibility 属性
<!DOCTYPE html> <html> <head> <style> div { position:relative; height:60px; width:60px; border:1px solid #000; background-color:yellow; transform:rotateY(30deg); } #div1 { backface-visibility:hidden; } #div2 { backface-visibility:visible; } </style> </head> <body> <p>本例有两个 div 元素,均旋转 180 度,背向用户。</p> <p>第一个 div 元素的 backface-visibility 属性设置为 "hidden",所以应该是不可见的。</p> <div id="div1">DIV 1</div> <div id="div2">DIV 2</div> <p><b>注释:</b>本例只在 Internet Explorer 10、Firefox、Chrome 以及 Safari 中有效。</p> </body> </html>
这个属性指的是当你旋转到元素的正面朝上时,如图
把
transform:rotateY(30deg);变成
transform:rotateY(180deg);
div1和div2都背部朝上时,
transform-style 属性
transform-style属性是3D空间一个重要属性,指定嵌套元素如何在3D空间中呈现。他主要有两个属性值:
flat和
preserve-3d。
transform-style属性的使用语法非常简单:
transform-style: flat | preserve-3d
其中
flat值为默认值,表示所有子元素在2D平面呈现。
preserve-3d表示所有子元素在3D空间中呈现。
也就是说,如果对一个元素设置了
transform-style的值为
flat,他的所有子元素在旋转时,都是以网页平面的x轴,y轴,z轴进行变换的,但是如果该元素设置成了preserve-3d,那么他的所有子元素在进行变换时,都是以父元素旋转以后的父元素平面为准线进行变形的
transform-style属性需要设置在父元素中,并且高于任何嵌套的变形元素。
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>菜鸟教程(runoob.com)</title> <style> #div1 { position: relative; height: 200px; width: 200px; margin: 100px; padding:10px; border: 1px solid black; } #div2 { padding:50px; position: absolute; border: 1px solid black; background-color: red; transform: rotateY(60deg); } #div3 { padding:40px; position: absolute; border: 1px solid black; background-color: yellow; transform: rotateY(90deg); } </style> </head> <body> <div id="div1"> <div id="div2">HELLO <div id="div3">YELLOW</div> </div> </div> </body> </html>
上例中,父元素没有设置preserve-3d,子元素旋转90度
子元素消失了,所有可以说明是以页面为轴线
给父元素加上preserve-3d,再将子元素旋转的角度变成30度,变成如图
子元素旋转的角度加上父元素旋转的角度是90度,上图正好显示出子元素旋转的正是90度,所以加上preserve-3d,是以父元素旋转之后父元素的页面为轴线
有一点需要特别提醒大家,如果你的元素设置
了transform-style值为
preserve-3d,就不能为了防止子元素溢出容器而设置
overflow值为
hidden,如果设置了
overflow:hidden同样可以迫死子元素出现在同一平面(和元素设置了
transform-style为
flat一样的效果)
相关文章推荐
- CSS3属性选择符介绍
- CSS3 Flexbox中flex-shrink属性的用法示例介绍
- CSS3 Background 属性介绍
- css3 column 属性介绍
- CSS3-perspective 属性
- CSS3教程:Transform的perspective属性设置
- 实例讲解CSS3中Transform的perspective属性的用法
- css3中transition属性的详细介绍
- CSS3 Border属性介绍
- 体会CSS3 perspective属性的作用
- CSS3 perspective 属性
- CSS3 Backgrounds属性相关介绍
- CSS3变形之Transform-style和Perspective等属性
- css3属性pointer-events介绍
- CSS3 Transform的perspective属性
- CSS3属性选择符介绍
- CSS3--perspective属性
- 吃透css3之3d属性--perspective和transform
- CSS3 属性介绍
- css3抗锯齿 font-smoothing 属性介绍 这一刻字体更清晰