perspective属性的两种书写形式实例页面

回到相关文章 »

代码:

CSS代码:
.container {
  display: block;
  width: 200px;
  height: 200px;
  margin-bottom: 50px;
  border: 1px solid #bbb;
}
.box {
  width: 100%;
  height: 100%;
  opacity: .75;
}

#darkred .box {
  background-color: darkred;
  transform: perspective(600px) rotateY(45deg);
}

#darkblue {
  perspective: 600px;
}
#darkblue .box {
  background-color: darkblue;
  transform: rotateY(45deg);
}
                
HTML代码:
<section id="darkred" class="container">
    <div class="box"></div>
</section>

<section id="darkblue" class="container">
    <div class="box"></div>
</section>
                

效果: