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%; }
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
Post a Comment