transform-style

transform-style规定该元素的嵌套元素如何在3D空间中呈现。

transform-style: preserve-3d
transform-style: flat
  
transform-style: inherit

HTML

 <div class="stage">
    <div class="positioning animated">
      <div class="monitor">
        <figure class="back">back</figure>
        <figure class="front">front</figure>
      </div>
    </div>
  </div>

CSS

.monitor .front {
  height: 80px;
  width: 100px;
  background: #e0e0e0;
  transform: translateZ(40px);
}
.monitor .back {
  height: 80px;
  width: 100px;
  background: linear-gradient(top, #f2f2f2, #e6e6e6 2.5px, #c2c2c2);
  transform: translateZ(-40px) rotateY(180deg);
}
.stage {
  width: 100%;
  height: 150px;
  position: relative;
  perspective: 1600px;
  perspective-origin: 50% 100px;
  background: #333;
}
.positioning {
  position: absolute;
  width: 90px;
  top: 30px;
  left: 50%;
  margin-left: -45px;
  transform-style: preserve-3d; //规定嵌套元素在三维空间内。
  transform: rotateY(-40deg);
}
.positioning.animated {
  animation: back-and-forth 14s ease-in-out infinite;
}
.monitor {
  width: 120px;
  height: 100px;
  margin: 0 auto;
  transform-style: preserve-3d;  //规定嵌套元素在三维空间内。
}
.monitor figure, .monitor span {
  display: block;
  position: absolute;
  opacity: 1;
}
figure {
  text-align: center;
  font-size: 30px;
  font-family: Helvetica, Arial, Sans-serif;
  color: red;
  line-height: 80px;
}
@keyframes back-and-forth {
  0% {  transform: rotateY(40deg);  }
  40%, 50% {  transform: rotateY(-40deg); }
  90%, 100% { transform: rotateY(40deg);  }
}
@keyframes flash {  
  0% { opacity: 0; }
  49.9% {  opacity: 0;  }
  50%, 100% {  opacity: 1;  }
}

执行结果

相关页面

• transform

外部链接