首页
学习
活动
专区
工具
TVP
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往

不同高度的CSS翻转效果

在CSS中实现不同高度的翻转效果,可以使用CSS的3D变换和过渡属性

  1. HTML结构:
代码语言:javascript
复制
<div class="flip-container">
  <div class="flipper">
    <div class="front">Front</div>
    <div class="back">Back</div>
  </div>
</div>
  1. CSS样式:
代码语言:javascript
复制
.flip-container {
  perspective: 1000px; /* 设置透视距离 */
  margin-bottom: 20px;
}

.flipper {
  position: relative;
  width: 100%;
  height: 200px; /* 设置翻转容器的高度 */
  transform-style: preserve-3d;
  transition: transform 0.6s;
}

.flip-container:hover .flipper {
  transform: rotateY(180deg);
}

.front, .back {
  position: absolute;
  width: 100%;
  height: 100%; /* 设置前后面的高度与翻转容器相同 */
  backface-visibility: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid #ccc;
  background-color: #fff;
}

.back {
  transform: rotateY(180deg);
  background-color: #f9c922;
}

在这个例子中,.flip-container是翻转效果的容器,.flipper是实际进行翻转的元素,而.front.back则是翻转前后的两个面。

通过设置.flip-container:hover .flippertransform属性为rotateY(180deg),当鼠标悬停在容器上时,.flipper会绕Y轴旋转180度,从而实现翻转效果。

页面内容是否对你有帮助?
有帮助
没帮助

相关·内容

没有搜到相关的合辑

领券