jquery - CSS transition not working on image -

i have created working transition div element, however, when tried apply exact same method image class, not work. instead of smoothly moving left jumps left. rotation transform animation work, not left transition.

.firstimg{ width: 5%; cursor: pointer; position: absolute;     -webkit-transition: 0.4s ease;    -moz-transition: 0.4s ease;     -ms-transition: 0.4s ease;      -o-transition: 0.4s ease;         transition: 0.4s ease; }  .turnedimg{ width: 5%; cursor: pointer; /*left: 12% !important;*/ position: absolute;  -webkit-transform: rotate(90deg);    -moz-transform: rotate(90deg);     -ms-transform: rotate(90deg);      -o-transform: rotate(90deg);         transform: rotate(90deg);      -webkit-transition: 0.4s ease;    -moz-transition: 0.4s ease;     -ms-transition: 0.4s ease;      -o-transition: 0.4s ease;         transition: 0.4s ease; } 

i not understand why rotation works transition not. how can make animations work? if interested, calling through jquery

$(".firstimg").toggleclass("turnedimg"); 

your image must have initial value 'left'

.firstimg{ width: 5%; left: 0%; cursor: pointer; ...