perspective

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

语法

/* Keyword value */
perspective: none;
 
/* <length> values */
perspective: 10px;  
perspective: 4.5em;

值

值	描述
none	当 pespective 样式没有被应用时的默认值.。
<length>	<length>，规定观察者距离z=0平面的距离，为元素及其内容应用透视变换。当值为0或负值时，无透视变换。

例子

HTML

<div class="stage">
  <div class="box"></div> 
</div>

CSS

.stage{
  position: relative;
  height: 150px;
  width: 150px;
  margin: 50px;
  padding:10px;
  color:#fff;
  border: 1px solid black;
  perspective:150;
  -webkit-perspective:150; /* Safari and Chrome */
  perspective-origin: 10% 10%;
  -webkit-perspective:10% 10%;
}
.box{
  padding:50px;
  position: absolute;
  border: 1px solid black;
  background-color: red;
  transform: rotateX(45deg);
  -webkit-transform: rotateX(45deg); /* Safari and Chrome */
}

执行结果

HELLO


跳至内容顶部