perspective-origin

perspective-origin 属性规定 3D 元素所基于的 X 轴和 Y 轴。该属性允许改变 3D 元素的底部位置。

当为元素规定 perspective-origin 属性时，其子元素会获得透视效果，而不是元素本身。

注释：该属性必须与 perspective 属性一同使用，而且只影响 3D 转换元素。

语法

perspective-origin: x-axis y-axis;

值

值	描述
x-axis	规定该视图在 x 轴上的位置。默认值：50%。
y-axis	规定该视图在 y 轴上的位置。默认值：50%。

例子

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 */
}
.box{
  padding:50px;
  position: absolute;
  border: 1px solid black;
  background-color: red;
  transform: rotateX(45deg);
  -webkit-transform: rotateX(45deg); /* Safari and Chrome */
}

执行结果

HELLO


跳至内容顶部