px를 사용할 때 CCS3 변형 원점이 올바르지 않음

Question

나는 정사각형과 애니메이션 코드를 순수한 html과 css로 만듭니다. 여기에 코드에 jsbin의 URL입니다 : https://jsbin.com/medupun/edit?html,output

는 그리고 다음 가장 관련성이 CSS의 일부입니다

.foo { 
    height: 100px; 
    width: 100px; 
    -webkit-transform-origin: 100px 0%; 
} 

.foo:hover { 
    -webkit-transform: rotate(-180deg); 
} 

광장은 100 픽셀로 100 픽셀입니다. 나는 그 변환 원점이 그 자체의 오른쪽 상단 구석 인 이되기를 바란다. 나는 단지 x/y 오프셋으로 그것을하려고합니다. 그래서 저는 "-webkit-transform-origin : 100px 0 %;"로합니다.

그러나 사각형이 오른쪽 위 모퉁이를 중심으로 회전하지 않는 것을 볼 수 있습니다. 원점을 130px 0 %로 변경하면 효과가 있습니다.

추가 30px의 출처는 어디에서 알 수 있습니까?

Answer 1

사각형에 너비가 30px 인 패딩이 있습니다.

padding: 1em; 

제거하면 찾고있는 결과를 얻을 수 있습니다.

.foo { 
     position: absolute; 
     top: 400px; 
     left: 400px; 
     height: 100px; 
     width: 100px; 
     text-align: center; 
     background: #ffea61; 
     -webkit-transition: all 750ms ease-in-out; 
     -webkit-transform-origin: 100px 0; 
    } 

    .foo:hover { 
     -webkit-transform: rotate(-180deg); 
    } 

https://jsbin.com/zovucefuxi/edit?html,output