변형 된 회전에 의해 만들어진 마름모를 중심으로합니다.

Question

변환 솜씨를 사용하여 마름모를 만들었지 만, 마름모의 중심점이 중간에있는 것이 아니라 오른쪽에있는 것처럼 보입니다. 내가 고칠 수있는 방법을 아는 사람 있니? http://jsfiddle.net/2M2j9/

.rhombus{ 
width:100px; 
height:100px; 
background:black; 
margin:0 auto; 
-webkit-transform: rotate(-45deg); 
-moz-transform: rotate(-45deg); 
-ms-transform: rotate(-45deg); 
-o-transform: rotate(-45deg); 
transform: rotate(-45deg); 
-webkit-transform-origin: 0 100%; 
-moz-transform-origin: 0 100%; 
-ms-transform-origin: 0 100%; 
-o-transform-origin: 0 100%; 
transform-origin: 0 100%; 
} 

Answer 1

Demo

사용

transform-origin: center; 

CSS

012,391,246,815,178,586,143 : 여기

내 코드입니다

당신은 절대 중심을 얻고 자하는 경우 Demo

CSS

.rhombus{ 
    width:100px; 
    height:100px; 
    background:black; 
    margin:auto; 
    position: absolute; 
    top:0; 
    bottom:0; 
    left:0; 
    right:0; 
    -webkit-transform: rotate(-45deg); 
    -moz-transform: rotate(-45deg); 
    -ms-transform: rotate(-45deg); 
    -o-transform: rotate(-45deg); 
    transform: rotate(-45deg); 
    -webkit-transform-origin: center; 
    -moz-transform-origin: center; 
    -ms-transform-origin: center; 
    -o-transform-origin: center; 
    transform-origin: center; 
}