旋转对象并从顶部对其进行缩放答案

【问题标题】：Rotate an object and scale it from the top旋转对象并从顶部对其进行缩放
【发布时间】：2018-06-20 18:57:56
【问题描述】：

我正在尝试通过从上到下在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>

上面的 sn-p 旋转了img-event-details div，但我不知道如何在旋转时仅从顶部调整 div 的宽度（如上图所示）。

【问题讨论】：

标签： css rotation css-transitions css-transforms

【解决方案1】：

添加一些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, 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>

【讨论】：