<div class="box">
<div class="block">
<code>transform-style: preserve-3d;</code>
<span>Привіт :)</span>
</div>
</div>
body {
font-family: monospace;
font-size: 18px;
line-height: 1.54;
}
#form {
padding: 8px 16px;
}
strong {
color: coolgrey;
border: 1px solid orange;
}
.box {
width: 200px;
display: inline-block;
margin-right: 100px;
}
@keyframes rotate {
from { transform: rotateX(0); }
to { transform: rotateX(360deg); }
}
.block {
padding: 16px 0;
font-size: 22px;
background-color: gold;
width: 250px;
text-align: center;
margin: 75px;
transform-style: preserve-3d;
animation: rotate 10s linear 0s infinite reverse none;
}
.block > span {
display: inline-block;
transform: translateZ(50px);
background-color: red;
padding: 4px;
color: #f1f1f1;
}
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.