translateZ()——动画示例

translateZ(t)

/* 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; } 
}