[分享]css3打开门

CSS3 可以使用 transform 属性来动态地改变 HTML 元素的形状、大小和位置。

下面的示例演示如何使用 CSS3 transform 属性创建一个打开的门效果：

.door-wrapper {
  position: relative;
  width: 340px;
  height: 500px;
  margin: 0 auto;
  perspective: 1000px;
}
.door {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  transform: rotateY(0deg);
  transform-origin: left center;
  transition: transform 1s;
}
.door.open {
  transform: rotateY(-110deg);
}

<div class="door-wrapper">
  <div class="door"></div>
</div>

<script>
var door = document.querySelector('.door');
setTimeout(function() {
  door.classList.add('open');
}, 500);
</script> 

首先，我们创建一个具有 perspective 样式的包装器元素以创建视角效果。包装器包含一个门元素，我们使用 transform-origin 来定义门的旋转原点。我们还为门元素设置过渡属性来实现平滑动画效果。

在 JavaScript 中，我们添加一个'open'类来打开门。开门效果实际上是通过使用 rotateY transform 来旋转门来实现的。

希望这篇文章可以帮助您了解如何使用 CSS3 来创建有趣的动画效果。