在 css3 过渡中按下按钮时对 div 标签进行动画处理

Question

我有一个div标签和一个按钮。我想要的是当我按下按钮时，我希望使用 css3 过渡对div 标签进行动画处理。当我按下按钮时，我当前的代码会旋转按钮，因为我正在对按钮应用转换。如何使以下代码按预期工作？

我的代码在这里

<button>Button</button>
<div class="rotate"></div>

CSS 样式

.rotate {
width: 100px;
height: 100px;
background: green;
-webkit-transition: -webkit-transform 0.5s ease;
}
button:active {
-webkit-transform: rotate(90deg);
}

Answer 1

您可以将+用于选择相邻的兄弟姐妹

button:active + div.rotate {
    transform:rotate(90deg);
    -ms-transform:rotate(90deg);
    -webkit-transform:rotate(90deg);
}

小提琴

有关相邻兄弟姐妹选择器的更多详细信息，请访问此处

Answer 2

只需将button:active更改为button:active + .rotate或button:active ~ .rotate

如果是相邻的同级，请使用+，如果它在 DOM 的下方，请使用 ~。

Answer 3

试试这个用法 如果是相邻的同级，请使用 +

.rotate  {
width: 100px;
height: 100px;
background: green;
-webkit-transition: -webkit-transform 0.5s ease;
}
  div
   {
webkit-transition: -webkit-transform 0.5s ease;  
   }
 button:active + div {
-webkit-transform: rotate(90deg);
   }

Answer 4

实现此目的的更好方法是使用更永久的伪类来触发更改，例如焦点类。

而且，如果您希望更改仅使用 CSS 持续存在，那么有一个黑客（甚至有名称;但我现在不记得了），这使得后退转换大大延迟

.rotate {
    width: 100px;
    height: 100px;
    background: green;
    -webkit-transition: -webkit-transform 9999s ease 9999s;
}
button:focus + div.rotate {
        transform:rotate(90deg);
    -ms-transform:rotate(90deg);
    -webkit-transform:rotate(90deg);
    -webkit-transition: -webkit-transform 0.5s ease;
}

小提琴