Question

我正在学习CSS过渡和转换。这是HTML：

<!DOCTYPE html>
<html>
<head>
  <title> Transformatons and Transitions</title>
  <meta charset="utf-8">
  <link rel="stylesheet" href="css/n.css">
</head>
<body>
    <div class="animate">animate</div>
    <div class="animate">animate2</div>
    <div class="different">different1</div>
    <div class="different">different2</div>
</body>
</html>

，CSS是：

div.different {
    transform: translate(1000px,400px);
    border-style: solid;
    padding: 25px;
    background-color: yellow;
    display: block;
    width: 125px;
    transition:1s ease-in-out;
}
div.different:hover{
    background-color: red;
    -webkit-transform: rotate(300deg);    
}

旋转无法正常工作。而不仅仅是旋转，元素正在移回原来的位置。该元素不再停留在（1000px，400px），而是返回（0px，0px）我如何防止其移动？

Answer 1

您必须在translate上使用hover，因为浏览器会将您的悬停转换解释为translate(0,0) rotate(300deg)：

div.different {
  -webkit-transform: translate(1000px, 400px);
      -ms-transform: translate(1000px, 400px);
          transform: translate(1000px, 400px);
  border-style: solid;
  padding: 25px;
  background-color: yellow;
  display: block;
  width: 125px;
  transition: 1s ease-in-out;
}
div.different:hover {
  background-color: red;
  -webkit-transform: translate(1000px, 400px) rotate(300deg);
      -ms-transform: translate(1000px, 400px) rotate(300deg);
          transform: translate(1000px, 400px) rotate(300deg);
}

Answer 2

在同一语句中定义两个转换并相应地更改它们：

<input {eachOption===selectedValue?'checked="checked"':''} type="checkbox" name="checkme"/>

小提琴：https://jsfiddle.net/quvLtwjt/1/

你重写了之前的转变。

但是，如果您要从当前位置而不是旧位置轮换div.different { transform: rotate(0deg) translate(1000px,400px); border-style: solid; padding: 25px; background-color: yellow; display: block; width: 125px; transition:1s ease-in-out; } div.different:hover{ background-color: red; -webkit-transform: rotate(300deg) translate(1000px,400px); }，则需要使用div来重新定义新位置并将两个转换放在同一个语句中：

transform-origin

小提琴：https://jsfiddle.net/quvLtwjt/

变换：旋转不仅可以旋转，还可以进行平移

2 个答案: