pespective是CSS transfrom中的一个属性,该属性指定了观察者与z=0平面的距离,使具有三维位置变换的元素产生透视效果。z>0的三维元素比正常大,而z<0时则比正常小,大小程度由该属性的值决定。

两种使用方式

比如:

.panel--red {
    /* perspective function in transform property */
    transform: perspective(400px) rotateY(45deg);
}

比如:

.scene--blue {
    /* perspective property */
    perspective: 400px;
}

.panel--blue {
    transform: rotateY(45deg);
}

注意:当perspective自身作为属性时,会修饰其孩子节点使其具有3D视角。所以上面示例中scene–blue样式应该设置在panel–blue元素的父节点上

当我们有多个元素的时候,你会发现效果并不是那么好,这是因为每一个元素都有自己的视角,所以我们需要为其父元素设置perspective属性,让所有孩子共享同一个3D空间。

.panel--seperate {
    transform: perspective(400px) rotateY(45deg);
}
.scene--together {
    perspective: 400px;
}

.panel--together {
    transform: rotateY(45deg);
}

pespective的值的大小决定了3D效果的强度,可以理解为观察者距离物体的距离。值越大,距离越远,值越小距离越近。perpective:2000px所呈现的效果就类似于观察者从很远的距离通过望远镜看到的一样;pespective:100px则像是在很近的距离观察一个大物体一样。

当然在3D转换中你可以不使用pespective,可以设置pespective:none或者不设置该属性。这种情况下你会看到所有的平面都是交织一起的而且没有结束点。

默认情况下,3D空间的结束点位于元素的中心,你可以通过pespective-origin属性进行修改。

.new-origin {
    perspective-origin: 25% 75%;
}

参考链接:

  1. MDN pespecive

  2. Intro to CSS 3D transforms

  3. 好吧,CSS3 3D transform变换,不过如此!–张鑫旭

  1. 寻寻觅觅 -- Christine Welch
  2. Just the Way You Are -- Bruno Mars
  3. Despacito(Remix) -- Luis Fonsi;Daddy Yankee;Justin Bieber
  4. 没有什么不同 -- 曲婉婷
  5. 故乡--许巍
  6. Jar Of Love -- 曲婉婷
  7. I Really Like You -- Carly Rae Jepsen