<div id="description">
<p>Блок повертається на 45 градусів за годинниковою стрілкою у тривимірному просторі за допомогою функції rotate3d(). Обидва блоки використовують однакові розміри для порівняння.</p>
</div>
<div class="container">
<div class="block"></div>
<div class="comparison-block"></div>
</div>
#description {
font-style: italic;
text-align: center;
line-height: 1.5;
margin-bottom: 50px;
padding: 12px 16px;
background-color: #f7f7f7;
border: 1px solid #ccc;
}
.container {
height: 200px;
background-color: #F2F2F2;
display: flex;
justify-content: space-around;
align-items: center;
}
.block {
width: 80px;
height: 80px;
background-color: #FFC107;
transform: rotate3d(1, 1, 0, 45deg);
}
.comparison-block {
width: 80px;
height: 80px;
background-color: #FF0000;
}
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.