主页 / 问题 / 939117
Accepted
Виктор
Asked:2020-01-31 22:23:55 +0000 UTC2020-01-31 22:23:55 +0000 UTC

如何通过在 CSS 中绕 Y 轴旋转来更改两个 DIV 元素（彼此相邻）[关闭]

  • 772

我想了解如何实现这样的东西 https://exadel.com/services/mobile-app-development/ 旋转一个 DIV 并用 CSS 替换为第二个（一开始不可见）？

css

2 个回答

  1. 只是看看那个网站上的网络检查器没有工作吗？

    容器。它有两个女主角。一个在另一个之下。

    底部的样式transform:rotateY(180deg)可以围绕垂直轴旋转。

    两者都有样式transition: transform 0.3s;（使其不会立即转动）和transform-style: preserve-3d;（设置转换的三维度；默认情况下，一切都在屏幕平面内）。

    当您将鼠标悬停在容器上时，它会生成一种样式，transform:rotateY(180deg)从底部 div 中删除转换 ( ) 并将其添加到顶部。

    • 1
  2. Best Answer

    我希望这是你需要的。

    body {
  padding: 0;
  margin: 0;
  font-family: "Roboto", sans-serif;
}

.wrap {
  position: absolute;
  width: 100%;
  height: 100%;
  left: 0;
  top: 0;
  background-color: #BBDEFB;
  display: flex;
  justify-content: center;
  align-items: center;
}

.card {
  width: 300px;
  height: 300px;
  position: relative;
  perspective: 1000px;
}

.front,
.back {
  position: absolute;
  width: 100%;
  height: 100%;
  left: 0;
  top: 0;
  display: flex;
  justify-content: center;
  align-items: center;
  transition: 1s;
  backface-visibility: hidden;
  border-radius: 10px;
}

.front {
  background-color: #fff;
}

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

.card:hover .front {
  transform: rotateY(180deg);
}

.card:hover .back {
  transform: rotateY(360deg);
}
    <div class="wrap">
  <div class="card">
    <div class="front"><span>Front</span></div>
    <div class="back"><span>Back</span></div>
  </div>
</div>

    • 1

相关问题