css3 : 요소는 항상 중심을 중심으로 회전합니다.

Question

나는이 demo입니다. 표시된 바와 같이, 요소는 중심을 중심으로 회전하지만, 왼쪽 테두리 (또는 왼쪽 축 또는 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) ; 
} 

입니다 그리고 회전을 시작합니다 그래서 자바 스크립트와 나는 div.item에를 클래스 을 회전 추가합니다.

Answer 1

당신은 오타

-webkit-tranform-origin: top left 0 ; 

나는 당신이 일을 의미하는 방법이 생각

-webkit-transform-origin: top left 0; 

에 변경을가 (?) DEMO