css - 旋转对象并从顶部对其进行缩放
问题描述
我正在尝试通过X
从上到下旋转位置来创建一个出现在悬停上的 div,我还想为其旋转添加一些现实(从底部开始的 DIV 的宽度应始终为 100%,但应逐渐增加从 20% 到 100% 白色旋转)。
.img-event-parent{
position: relative;
}
.img-event-details{
position: absolute;
background-color: rgba(0,0,0,0.8);
left: 0px;
right: 0px;
top: 0px;
height: 100%;
transform: rotateX(90deg);
transform-style: preserve-3d;
-webkit-transform: rotateX(90deg);
transform-origin: bottom;
transition: all 3s;
}
.img-event-parent:hover .img-event-details{
transform: rotateX(0deg);
}
<div class="img-event">
<div class="img-event-parent img-parent">
<a href="#">
<img src="https://images.pexels.com/photos/20787/pexels-photo.jpg?auto=compress&cs=tinysrgb&h=350" alt="">
</a>
<div class="img-event-details">
<a href="#" class="slick-desc"><?=$key->post_title?></a>
</div>
</div>
</div>
上面的片段旋转了img-event-details
div,但我不知道如何在旋转时仅从顶部调整 div 的宽度(如上图所示)。
解决方案
添加一些观点:
.img-event-parent {
position: relative;
display: inline-block;
perspective: 200px; /*Added this*/
perspective-origin: bottom; /*Added this*/
}
.img-event-parent img {
display: block;
}
.img-event-details {
position: absolute;
background-color: rgba(0, 0, 0, 0.8);
left: 0px;
right: 0px;
top: 0px;
height: 100%;
transform: rotateX(90deg);
transform-style: preserve-3d;
transform-origin: bottom;
transition: all 3s;
}
.img-event-parent:hover .img-event-details {
transform: rotateX(0deg);
}
<div class="img-event">
<div class="img-event-parent img-parent">
<a href="#">
<img src="https://images.pexels.com/photos/20787/pexels-photo.jpg?auto=compress&cs=tinysrgb&h=300" alt="">
</a>
<div class="img-event-details">
<a href="#" class="slick-desc">Some text</a>
</div>
</div>
</div>