css 按钮滑入展示 多个旋转按钮

<p>以下是一个简单的演示，其中包含一个 CSS 动画和一些鼠标事件来实现按钮的旋转和展示。</p>
<p>HTML 代码：</p>
<pre><code>&lt;div class=&quot;button-container&quot;&gt;
  &lt;button class=&quot;rotate-button&quot;&gt;
    &lt;span&gt;按钮1&lt;/span&gt;
  &lt;/button&gt;
  &lt;button class=&quot;rotate-button&quot;&gt;
    &lt;span&gt;按钮2&lt;/span&gt;
  &lt;/button&gt;
  &lt;button class=&quot;rotate-button&quot;&gt;
    &lt;span&gt;按钮3&lt;/span&gt;
  &lt;/button&gt;
&lt;/div&gt;
</code></pre>
<p>CSS 代码：</p>
<pre><code>.button-container {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
}

.rotate-button {
  position: relative;
  margin: 0 20px;
  padding: 10px 20px;
  border: none;
  border-radius: 50%;
  background-color: #333;
  color: #fff;
  font-size: 18px;
  font-weight: bold;
  text-transform: uppercase;
  transform-style: preserve-3d;
  transition: transform 0.5s ease;
  cursor: pointer;
}

.rotate-button:hover {
  transform: rotateY(360deg);
}

.rotate-button span {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

.rotate-button:nth-child(1) {
  transform: rotateY(0deg);
}

.rotate-button:nth-child(2) {
  transform: rotateY(120deg);
}

.rotate-button:nth-child(3) {
  transform: rotateY(240deg);
}

.rotate-button:nth-child(1):hover ~ .rotate-button {
  transform: rotateY(120deg);
}

.rotate-button:nth-child(2):hover ~ .rotate-button {
  transform: rotateY(240deg);
}

.rotate-button:nth-child(3):hover ~ .rotate-button {
  transform: rotateY(360deg);
}
</code></pre>
<p>解释：</p>
<ul>
<li><code>.button-container</code> 用于将所有按钮居中显示。</li>
<li><code>.rotate-button</code> 是按钮的样式，包括圆形、背景色、字体样式、3D 变换等。</li>
<li><code>:hover</code> 伪类用于按钮的鼠标悬停事件，将按钮旋转 360 度。</li>
<li><code>nth-child()</code> 伪类用于选择第 n 个子元素，用于将每个按钮旋转到不同的角度。</li>
<li><code>~</code> 选择器用于选择后面所有的兄弟元素，用于展示其他按钮。</li>
</ul>
<p>效果如下：</p>
<pre><code>&lt;div class=&quot;button-container&quot;&gt;
  &lt;button class=&quot;rotate-button&quot;&gt;
    &lt;span&gt;按钮1&lt;/span&gt;
  &lt;/button&gt;
  &lt;button class=&quot;rotate-button&quot;&gt;
    &lt;span&gt;按钮2&lt;/span&gt;
  &lt;/button&gt;
  &lt;button class=&quot;rotate-button&quot;&gt;
    &lt;span&gt;按钮3&lt;/span&gt;
  &lt;/button&gt;
&lt;/div&gt;
</code></pre>
<style>
.button-container {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
}

.rotate-button {
  position: relative;
  margin: 0 20px;
  padding: 10px 20px;
  border: none;
  border-radius: 50%;
  background-color: #333;
  color: #fff;
  font-size: 18px;
  font-weight: bold;
  text-transform: uppercase;
  transform-style: preserve-3d;
  transition: transform 0.5s ease;
  cursor: pointer;
}

.rotate-button:hover {
  transform: rotateY(360deg);
}

.rotate-button span {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

.rotate-button:nth-child(1) {
  transform: rotateY(0deg);
}

.rotate-button:nth-child(2) {
  transform: rotateY(120deg);
}

.rotate-button:nth-child(3) {
  transform: rotateY(240deg);
}

.rotate-button:nth-child(1):hover ~ .rotate-button {
  transform: rotateY(120deg);
}

.rotate-button:nth-child(2):hover ~ .rotate-button {
  transform: rotateY(240deg);
}

.rotate-button:nth-child(3):hover ~ .rotate-button {
  transform: rotateY(360deg);
}
</style>