html - Center a Rhombus created by transform rotate -


i created rhombus using transform css propriety seems center point of rhombus on right side instead of being in middle. knows how fix ?

here code :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%; } 

demo

use

transform-origin: center; 

css

.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: center;      -moz-transform-origin: center;      -ms-transform-origin: center;      -o-transform-origin: center;      transform-origin: center; } 

if wish have absolute center 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; } 

Comments

Popular posts from this blog

database - VFP Grid + SQL server 2008 - grid not showing correctly -

jquery - Set jPicker field to empty value -

.htaccess - htaccess convert request to clean url and add slash at the end of the url -