当前位置主页 > 资料库 > 前端教程 > CSS属性参考 | perspective

CSS属性参考 | perspective

2016-07-22
麦子学院

CSS perspective 属性用于为一个元素激活3D空间透视效果,使其子元素可以被放置在3D空间中。

通过perspective属性,可以使元素有远近的三维视觉效果,你可以增加Z轴值,使它更接近观察者,从而显示出更大的图像。或者减少Z轴值,使图像显得更小。

下图是W3C关于透视效果的一张说明图片:

perspective属性原理示意图

图中蓝色的部分代表一个元素位于三维空间中。字母 d 代表透视度(perspective),它表示观察者的眼睛到屏幕之间的距离。字母 Z 代表元素在3D空间Z轴方向上的位置。元素的Z轴值越大,离观察者越远,看起来越小;Z轴值越小,离观察者越近,看起来越大。

perspective属性通常和CSS transform函数一起使用。perspective属性的取值可以是一个length数据类型值,或者关键字none。当该属性的取值不是0或关键字none的时候,会为元素创建一个新的堆叠上下文

如果没有为元素设置perspective属性,而对它使用3D transform函数进行转换的话,元素看起来将是二维的平面。

perspective 和 perspective()

当你想将一个元素转换为3D空间的时候,有两种方法。第一种是在元素的父元素上使用perspective属性,将其制作为3D空间。第二种是在被转换元素自身上使用perspective()函数。这两种方式有什么相同点和区别呢?

使用这两种方法都可以为元素制作3D透视效果,使元素具有远近的3D感觉。元素在Z轴方向的值越大,元素距离观察者就越远,观察者看到的图像就越小。反之,元素距离观察者就越近,观察者看到的图像就越大。

当你为一个元素使用perspective()函数的时候,你只为那个元素本身激活了3D透视空间。而使用perspective属性,你可以为一个父元素激活3D透视空间,使它里面的所有子元素都共享这个3D空间。

如果你为一个父元素使用了perspective属性来制作3D透视空间,同时又为它里面的子元素分别设置不同perspective()函数,那么各个子元素的实际效果会和你所期望的有所差别,因为各个子元素都有各自的3D空间和自己的消失点。

默认情况下。一个3D空间的消失点位于中间位置。如果元素不共享同一个3D空间,那么它们各自拥有自己的消失点。因此,使用perspective()函数的结果是各个元素都拥有自己的3D空间和消失点。为了避免这种情况的发生,所有元素应该共享一个3D空间。通过在父元素上使用perspective属性,可以使所有的子元素共享这个3D空间,拥有共同的消失点。

下面的两幅图片展示了perspective属性和perspective()函数的效果:

perspective属性示意图
perspective属性设置在父容器元素上,所有子元素共享一个3D空间和消失点。各个元素使用rotateY()函数沿Y轴旋转60度。
perspective()函数示意图
各个元素拥有自己的perspective()函数,它们有各自的3D空间和消失点。
官方语法
perspective: none | <length>

参数:

  • <length>:使用<length>值来指定观察者到z=0的平面之间的距离。为元素及其内容应用透视变换。当值为0时,无透视变换。长度值不允许为负数。
  • none:不为元素应用3D透视效果,不会建立3D空间。

perspective属性的初始值为none

应用范围

perspective属性可以应用在所有可以被转换的元素上。

示例代码

取值示例代码如下:

/* 关键字 */
perspective: none;

/* <length> 值 */
perspective: 20px;  
perspective: 3.5em;

perspective: inherit;

应用示例代码如下:

.container {
    perspective: 1200px;
}
.element {
    transform: translateZ(-80px) rotateX(45deg);
}
在线演示

下面是一个3D立方体的例子,通过为立方体的父容器设置不同的perspective值,得到不同透视效果的立方体。

1
2
3
4
5
6

perspective: 250px;

1
2
3
4
5
6

perspective: 350px;

1
2
3
4
5
6

perspective: 500px;

主要代码如下:

<div class="container">
     <div class="cube pers250">
        <div class="face front">1</div>
        <div class="face back">2</div>
        <div class="face right">3</div>
        <div class="face left">4</div>
        <div class="face top">5</div>
        <div class="face bottom">6</div>
     </div>
     <p>perspective: 250px;</p>
  </div>
  <div class="container">
     <div class="cube pers350">
        <div class="face front">1</div>
        <div class="face back">2</div>
        <div class="face right">3</div>
        <div class="face left">4</div>
        <div class="face top">5</div>
        <div class="face bottom">6</div>
     </div>
     <p>perspective: 350px;</p>
  </div>
  <div class="container">
     <div class="cube pers500">
        <div class="face front">1</div>
        <div class="face back">2</div>
        <div class="face right">3</div>
        <div class="face left">4</div>
        <div class="face top">5</div>
        <div class="face bottom">6</div>
     </div>
     <p>perspective: 500px;</p>
  </div>
.pers250 {
    perspective: 250px;
    -webkit-perspective: 250px;
}
.pers350 {
    perspective: 350px;
    -webkit-perspective: 350px;
}
.pers500 {
    perspective: 500px;
    -webkit-perspective: 500px;
}
 .container {
   display: inline-block;
   width: 200px;
   height: 200px;
   margin: 75px 0 0 30px;
   border: none;
}
.cube {
   width: 100%;
   height: 100%;
   backface-visibility: visible;
   perspective-origin: 150% 150%;
   transform-style: preserve-3d;
   -webkit-backface-visibility: visible;
   -webkit-perspective-origin: 150% 150%;
   -webkit-transform-style: preserve-3d;
}
.face {
   display: block;
   position: absolute;
   width: 100px;
   height: 100px;
   border: none;
   line-height: 100px;
   font-family: sans-serif;
   font-size: 60px;
   color: white;
   text-align: center;
}
 .front {
   background: rgba(0, 0, 0, 0.3);
   transform: translateZ(50px);
   -webkit-transform: translateZ(50px);
}
.back {
   background: rgba(0, 255, 0, 1);
   color: black;
   transform: rotateY(180deg) translateZ(50px);
   -webkit-transform: rotateY(180deg) translateZ(50px);
}
.right {
   background: rgba(196, 0, 0, 0.7);
   transform: rotateY(90deg) translateZ(50px);
   -webkit-transform: rotateY(90deg) translateZ(50px);
}
.left {
   background: rgba(0, 0, 196, 0.7);
   transform: rotateY(-90deg) translateZ(50px);
   -webkit-transform: rotateY(-90deg) translateZ(50px);
}
.top {
   background: rgba(196, 196, 0, 0.7);
   transform: rotateX(90deg) translateZ(50px);
   -webkit-transform: rotateX(90deg) translateZ(50px)
}
.bottom {
   background: rgba(196, 0, 196, 0.7);
   transform: rotateX(-90deg) translateZ(50px);
   -webkit-transform: rotateX(-90deg) translateZ(50px);
}
浏览器支持

CSS perspective属性的浏览器兼容性可以参考下面的兼容性列表:

CSS perspective属性的浏览器兼容性列表

相关阅读
Previous:
上一篇:CSS属性参考 | padding
Next:
下一篇:CSS属性参考 | perspective-origin

我要评论

返回顶部