css3开关门代码示例

温馨提示：这篇文章已超过289天没有更新，请注意相关的内容是否还可用！

CSS3开关门效果是一种炫酷的动画效果，可以给网页增添一些活力和趣味性。通过利用CSS3的transform属性和过渡效果，我们可以实现一个真实的门开关效果。

我们需要创建一个HTML结构，包含一个门的容器和两个门扇。门的容器可以使用一个div元素，并设置一个适当的宽度和高度。门扇可以使用两个div元素分别表示左门扇和右门扇。

接下来，我们需要使用CSS来定义门的样式。我们将门的容器设置为相对定位，以便门扇可以相对于容器进行定位。然后，我们将门扇的宽度设置为50%并将其放置在容器的左右两侧。为了使门扇看起来像真正的门，我们可以为其添加一些背景颜色和边框样式。

接下来，我们需要使用CSS3的transform属性来实现门的开关效果。我们可以使用rotateY()函数来实现门扇绕Y轴旋转的效果。当门关闭时，我们可以将左门扇的旋转角度设置为0度，右门扇的旋转角度设置为0度。当门打开时，我们可以将左门扇的旋转角度设置为-90度，右门扇的旋转角度设置为90度。通过过渡效果，我们可以使门扇的旋转过程变得平滑。

下面是示例代码：

HTML代码：


<div class="4a55-52ae-0184-03a6 door-container">
  <div class="52ae-0184-03a6-6fcd door-left"></div>
  <div class="0184-03a6-6fcd-b2a2 door-right"></div>
</div>

CSS代码：


.door-container {
  position: relative;
  width: 200px;
  height: 300px;
}
.door-left, .door-right {
  position: absolute;
  top: 0;
  width: 50%;
  height: 100%;
  background-color: #ccc;
  border: 1px solid #999;
  transition: transform 0.5s ease;
}
.door-left {
  left: 0;
  transform-origin: right center;
}
.door-right {
  right: 0;
  transform-origin: left center;
}
.door-container.open .door-left {
  transform: rotateY(-90deg);
}
.door-container.open .door-right {
  transform: rotateY(90deg);
}