css – 旋转对象并从顶部缩放

我试图通过从上到下旋转X位置来创建一个出现悬停的div,我还想为它的旋转添加一些逼真的(DIV从底部的宽度应始终为100％,但应该增加逐渐从20％到100％白色它旋转). .img-ev

... . . 我试图通过从上到下旋转X位置来创建一个出现悬停的div,我还想为它的旋转添加一些逼真的(DIV从底部的宽度应始终为100％,但应该增加逐渐从20％到100％白色它旋转).

.img-event-parent{	position: relative;}.img-event-details{	position: absolute;	background-color: rgba(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宽度(如上图所示).

.

解决方法

. 添加一些 perspective：

.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.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>

. . .. ...