<div id="description">
<h2>Приклад 2: зміна масштабу елемента за допомогою функції matrix3d()</h2>
<p>Два однакові елементи, але один з них має змінений масштаб після застосування функції matrix3d().</p>
</div>
<div id="result">
<div class="element"></div>
<div class="element transformed"></div>
</div>
#description {
background: #f2f2f2;
padding: 20px;
font-family: Arial, sans-serif;
}
#result {
display: flex;
justify-content: center;
align-items: center;
height: 300px;
}
.element {
width: 100px;
height: 100px;
background-color: #ff6347;
margin-right: 20px;
}
.transformed {
background-color: #6495ed;
transform: matrix3d(0.8, 0, 0.2, 0, 0, 0.8, 0, 0, -0.2, 0, 0.8, 0, 0, 0, 0, 1);
}
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.