[翻译]CSS3 perspective 用法
发布在前端小菜鸡的填坑之路2015年12月2日view:2527css3
在文章任何区域双击击即可给文章添加【评注】!浮到评注点上可以查看详情。

CSS3 perspective属性让元素拥有了视野和视角的效果,而不是像以往的贴在屏幕上的平面,模拟了眼睛与物体之前的距离带来的远近视差效果。比如你站在铁轨上,往铁轨的方向看去,你会看到铁轨并不是平行的,而是趋于相交的。

它值的大小决定了眼睛与元素的距离,值越小则离得越近,值越大则离的越远。同样在页面上的两个2D正方形,如果perspective属性的值不同,则大小就不一样。

需要注意的是,perspective并不影响当前元素的渲染,而是影响它的所有子元素。这也是它跟transform:perspective()方法的主要区别,例子如下。

<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()的效果

让我们看一个更cool的例子

<div class="wrapper w1">
  <h1><code>perspective: 1000px</code></h1>
  <div class="cube">
    <div class="side  front">1</div>
    <div class="side   back">6</div>
    <div class="side  right">4</div>
    <div class="side   left">3</div>
    <div class="side    top">5</div>
    <div class="side bottom">2</div>
  </div>
</div>
<div class="wrapper w2">
  <h1><code>perspective: 250px</code></h1>
  <div class="cube">
    <div class="side  front">1</div>
    <div class="side   back">6</div>
    <div class="side  right">4</div>
    <div class="side   left">3</div>
    <div class="side    top">5</div>
    <div class="side bottom">2</div>
  </div>
</div>
.wrapper {
  width: 50%;
  float: left;
}

.w1 {
  perspective: 1000px;
}

.w2 {
  perspective: 250px;
}

.wrapper h1 {
  text-align: center;
}

.cube {
  font-size: 4em;
  width: 2em;
  margin: 1.5em auto;
  transform-style: preserve-3d;
  transform: rotateX(-40deg) rotateY(32deg);
}

.side {
  position: absolute;
  width: 2em;
  height: 2em;

  background: rgba(tomato, .6);
  border: 1px solid rgba(0,0,0,.5);

  color: white; 
  text-align: center;
  line-height: 2em;
}

.front  { transform:                  translateZ(1em); }
.top    { transform: rotateX( 90deg)  translateZ(1em); }
.right  { transform: rotateY( 90deg)  translateZ(1em); }
.left   { transform: rotateY(-90deg)  translateZ(1em); }
.bottom { transform: rotateX(-90deg)  translateZ(1em); }
.back   { transform: rotateY(-180deg) translateZ(1em); }

效果如下图:

评论
发表评论
暂无评论
WRITTEN BY
PUBLISHED IN
前端小菜鸡的填坑之路

前端小菜鸡的填坑之路

我的收藏