<div id="description">
<h2>Приклад 1: зміна елемента за допомогою функції perspective()</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: 200px;
height: 200px;
background-color: #ff6347;
transition: transform 0.3s ease;
}
.element:hover {
perspective: 500px;
transform: rotateY(45deg);
}
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.