为什么当我将鼠标悬停在具有 3d 旋转效果的元素上时,它会意外拉伸? [英] why does this element with 3d rotation effect unexpectedly stretch when I hover on it?
问题描述
我使用以下代码为元素添加了旋转悬停效果:
变换:透视(600px)rotateY(-25deg);
但是当我悬停在它上面时,我意识到有一个大问题.元素旋转,但有时它会突然快速旋转并拉伸这么多
为什么会发生这种情况,我该如何解决?
.container{显示:弹性;对齐内容:间隔;背景色:卡其色;保证金:20% 自动;宽度:80%;}.文本{边距:20px;宽度:110%;}.回转{位置:相对;宽度:200px;高度:200px;转换持续时间:.3s;背景色:珊瑚色;文本对齐:居中;字体大小:18px;}.测试{背景颜色:浅蓝色;}.test:悬停 .rotation{变换:透视(600px)rotateY(-25deg);}.信息{位置:绝对;顶部:50%;左:50%;变换:翻译(-50%,-50%);}
<div class="text">Lorem ipsum dolor 坐 amet consectetur adipisicing 精英.在此处输入代码Expedita cumque modi et tenetur, consectetur dictamolestias corporis, eligendi.<div class="test"><div class="旋转"><div class="message">一直在我身上徘徊直到你看到问题