<div id="description">
<h2>Приклад 1: зміна елемента за допомогою функції matrix3d()</h2>
<p>При наведенні курсору на елемент, він змінює свою позицію та масштаб у тривимірному просторі.</p>
</div>
<div id="result">
<div class="element"></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;
transition: transform 0.3s ease;
}
.element:hover {
transform: matrix3d(1.2, 0.2, 0, 0, 0, 1.2, 0, 0, 0, 0, 1.2, 0, 0, 0, 0, 1);
}
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.