Я просматривал этот простой код около ста раз, свойство transform работает просто отлично, но оно просто фиксируется на месте, как будто свойство transition не работает, какие мелкие детали я продолжаю замазывать? Здесь закомментировано jsfiddle со свойством transform. https://jsfiddle.net/t8kbtjdy/30/

#testItem{
  width: 100px;
  height: 100px;
  background-color: red;
  transform: rotate(45deg);
  transition: transform 1000ms ease-in-out 0ms;
}
2
alexis 2 Апр 2017 в 09:01

2 ответа

Лучший ответ

Проблема в вашем случае заключается в том, что вы загружаете свой элемент в преобразованном состоянии на своей странице, поэтому переходить к нему нечего.

В приведенном ниже примере я использовал hover, чтобы изменить вращение:

#testItem{
  width: 100px;
  height: 100px;
  background-color: red;
  transition: transform 1000ms ease-in-out 0ms;
}
#testItem:hover{
  transform: rotate(45deg);
}
<div id="t2">
  <div id="testItem"></div>
</div>

Однако, если вы хотите видеть свой переход при загрузке страницы вместо :hover, вам нужно использовать css animation

@keyframes rotateIt {
  0% {
    transform: rotate(0);
  }
  50% {
    transform: rotate(45deg);
  }
  100% {
    transform: rotate(0);
  }
}

#testItem{
  width: 100px;
  height: 100px;
  background-color: red;
  animation: rotateIt 1s infinite;
}
<div id="t2">
  <div id="testItem"></div>
</div>
1
Amir Hoseinian 2 Апр 2017 в 06:44

Я думаю, что вы должны идти с S вместо MS.

Transition: all 1s ;

Вы можете обрезать его по своему усмотрению.

0
M.C 2 Апр 2017 в 06:21