Если вы хотите делать это при открытии страницы - нужно воспользоваться @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>