用途
translateZ() 规定Z轴Z上的移动。
语法
translateZ(t)
值
值 | 描述 |
---|---|
t | 规定Z轴的移动距离。 |
例子
/* 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);//旋转轴的 Z 坐标 50个像素。 }
.monitor .back {
height: 80px;
width: 100px;
background: linear-gradient(top, #f2f2f2, #e6e6e6 2.5px, #c2c2c2);
transform: translateZ(-40px) rotateY(180deg); //旋转轴的 Z 坐标 -40个像素。与 Y 坐标180度。 }
.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; }
}
执行结果