1

Хочу сделать плавный поворот, но не получается, хотя я все указал. Как это реализовать? Макет:

.left-part {
 display: inline-block;
background: red;
width: 100px;
height: 100px;
transform: rotate(30deg);
}

#all {
transition: 1s;
}
<div id='all'>
<div class='left-part'></div>
</div>

2 ответа 2

1

Если вы хотите делать это при открытии страницы - нужно воспользоваться @keyframes

.left-part {
  display: inline-block;
  background: red;
  width: 100px;
  height: 100px;
  animation: rotate 1s forwards;
}

@keyframes rotate {
  0% {transform: rotate(0)}
  100% {transform: rotate(30deg)}
}
<div id='all'>
<div class='left-part'></div>
</div>


Если при наведении то достаточно указания transition у элемента

.left-part {
  display: inline-block;
  background: red;
  width: 100px;
  height: 100px;
  transition: 1s;
}

div.left-part:hover{
  transform: rotate(30deg)
}
<div id='all'>
<div class='left-part'></div>
</div>


Так же можно отложить добавку класса, в котором задается поворот, и тогда все сработает как и с наведением.

setTimeout(e => $('.left-part').addClass('rotate'))
.left-part {
  display: inline-block;
  background: red;
  width: 100px;
  height: 100px;
}

.left-part.rotate {
  transform: rotate(30deg);
  transition: 1s;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class='left-part'></div>

2
  • Не могли бы вы дополнить ответ, сделав вариант как через @keyframes, но не на css, а на jquery?
    – Iamready
    22 мая 2019 в 17:50
  • @lIamreadyда, конечно 22 мая 2019 в 17:52
0

Вот это

transition: 1s

Нужно указать с элементом. над каким происходят изменения. В данный момент у Вас transition стоит у родителя

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.