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 我将类rotate添加到 div.item 中，这样它就会开始旋转。

Answer 1

你有一个错字

-webkit-tranform-origin: top left 0 ;

我把它改成

-webkit-transform-origin: top left 0;

我认为这就是你的意思（？）演示