CSS Transform Skew


Answer :

.red.box {
background-color: red;
transform: perspective( 600px ) rotateY( 45deg );
}


Then HTML:



<div class="box red"></div>


from http://desandro.github.com/3dtransforms/docs/perspective.html



I think you mean webkit transform.. please check this URL out
http://www.the-art-of-web.com/css/3d-transforms/ it could help you.



CSS:



#box {
width: 200px;
height: 200px;
background: black;
position: relative;
-webkit-transition: all 300ms ease-in;
}
#box:hover {
-webkit-transform: rotate(-180deg) scale(0.8);
}
#box:after, #box:before {
display: block;
content: "\0020";
color: transparent;
width: 211px;
height: 45px;
background: white;
position: absolute;
left: 1px;
bottom: -20px;
-webkit-transform: rotate(-12deg);
-moz-transform: rotate(-12deg);
}
#box:before {
bottom: auto;
top: -20px;
-webkit-transform: rotate(12deg);
-moz-transform: rotate(12deg);
}​


HTML:



<div id=box></div>​


Works in Chrome and FF 4: http://jsfiddle.net/rudiedirkx/349x9/



This might help: http://jsfiddle.net/rudiedirkx/349x9/2880/



And this too (from Erwinus' comment): http://css-tricks.com/examples/ShapesOfCSS/



Comments

Popular posts from this blog

Converting A String To Int In Groovy

"Cannot Create Cache Directory /home//.composer/cache/repo/https---packagist.org/, Or Directory Is Not Writable. Proceeding Without Cache"

Android SDK Location Should Not Contain Whitespace, As This Cause Problems With NDK Tools