css - css3: 要素は常に中心を中心に回転します

Question

私はこのデモを持っています。示されているように、要素はその中心を中心に回転しますが、私がしようとしているのは、左の境界線 (または左軸、または y 軸?) を中心に回転させることです。これは可能ですか？

これが私のhtmlです

<div id="parent">
    <div class="item">Rotate</div>
</div>

そしてcss

#parent {
    -webkit-perspective: 850px ;
    margin-left: 200px ;
}
.item {    
    -webkit-transform-style: preserve-3d ;
    -webkit-transition: -webkit-transform 5s linear ;
    background-color: grey ;
    width: 200px ;
    -webkit-tranform-origin: top left 0 ;
}
.item.rotate {
    -webkit-transform: rotateY(180deg) ;
}

そして、javascript を使用して、div.item にクラスの回転を追加して、回転を開始します。