CSS transition -webkit-transform jumping position - css

Question

I have the following CSS:
.element{
position:relative;
transition:all 1s;
-webkit-transform: rotateX(1deg) rotateZ(1deg) rotateY(0deg);
-webkit-transform-style: preserve-3d;
}
.spun{
.element{
top:260px;
-webkit-transform: rotateX(45deg) rotateZ(45deg) rotateY(0deg);
}
}
and HTML
<div class="element" id="element-1">
<div class="graphic-wrap">
Text 1
</div>
</div>
<div class="element" id="element-2">
<div class="graphic-wrap">
Text 2
</div>
</div>
<div class="element" id="element-3">
<div class="graphic-wrap">
Text 3
</div>
</div>
When I add a class of spun to the body, everything jumps before moving into position. You can see it actually goes off the screen, even though if you compare the position of where it starts, and where it ends, they are really similar:
Demo: http://codepen.io/EightArmsHQ/pen/dadff4f8e9f63e9f825693865d1c9354
If, however I don't add the spun class, and instead gradually increment the values in developer tools, it gradually moves how I want it to.
How can I prevent everything from jumping?

Answer 1

This is because the .element doest have an initial top position so there is no state for it to transform from.
Simply give the .element a starting position. Eg:
$('body').click(function(){
$(this).toggleClass('spun');
})
.element {
top: 0px;
position: relative;
transition: all 1s;
transform: rotateX(1deg) rotateZ(1deg) rotateY(0deg);
transform-style: preserve-3d;
transform-origin: 50% 50%;
}
.spun .element {
top: 260px;
transform: rotateX(45deg) rotateZ(45deg) rotateY(0deg);
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="element" id="element-1">
<div class="graphic-wrap">
Text 1
</div>
</div>
<div class="element" id="element-2">
<div class="graphic-wrap">
Text 2
</div>
</div>
<div class="element" id="element-3">
<div class="graphic-wrap">
Text 3
</div>
</div>