After implementing a rotational hover effect on an element using the following code:
transform: perspective(600px) rotateY(-25deg);
I encountered a major issue when hovering over it. The element sometimes rotates abruptly and stretches excessively.
If you're facing similar problems, check out this CodePen for reference.
.container{
display: flex;
justify-content: space-between;
background-color: khaki;
margin: 20% auto;
width: 80%;
}
.text{
margin: 20px;
width: 110%;
}
.rotation{
position: relative;
width: 200px;
height: 200px;
transition-duration: .3s;
background-color: coral;
text-align: center;
font-size: 18px;
}
.test{
background-color: lightblue;
}
.test:hover .rotation{
transform: perspective(600px) rotateY(-25deg);
}
.message{
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}<div class="container">
<div class="text">
Lorem ipsum dolor sit amet consectetur adipisicing elit.
Expedita cumque modi et tenetur, consectetur dicta
molestias corporis, eligendi.
</div>
<div class="test">
<div class="rotation">
<div class="message">
keep hovering on me until you see the problem
</div>
</div>
</div>
</div>