CSS Transform Skew
60,236
Solution 1
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/
Solution 2
.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
Solution 3
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.
Solution 4
You can use -webkit-perspective and -webkit-transform together.
<div style="-webkit-perspective:300;">
<div style="-webkit-transform:rotate3d(0, 1, 0, 30deg);width:200px;height:200px;background:#D73913;"></div>
</div>
This works only in Safari.
Solution 5
Use this css code. Set the numbers according to your need
-webkit-transform: translateX(16em) perspective(600px) rotateY(10deg);
-moz-transform: translateX(16em) perspective(600px) rotateY(10deg);
-ms-transform: translateX(16em) perspective(600px) rotateY(10deg);
-o-transform: translateX(16em) perspective(600px) rotateY(10deg);
transform: translateX(16em) perspective(600px) rotateY(10deg);
Author by
realph
Updated on June 28, 2020Comments
-
realph almost 4 years
Does anyone know how to achieve skew like this:
Using CSS's new transform property?
As you can see I'm trying to skew both corners, anyone know if this is possible?
-
desau over 12 yearsThis isn't skew, and it doesn't skew contents.
-
Rudie over 12 yearsYup. It's a hack. It won't work with the background having a background color/image either: jsfiddle.net/rudiedirkx/349x9/411
-
W.K.S about 11 yearsWhat does
content: "\0020";
do? -
Rudie about 11 years20 (hex, 32 dec) is a space. You could use "" these days. No character necessary I think.
-
Codebeat about 10 yearsIn this case I see two rectangles and a trapezium. If it is the case like in the example, why don't use three shapes? css-tricks.com/examples/ShapesOfCSS
-
Blazemonger over 8 yearsThis should be a comment, not an answer. Please do not post link-only answers to questions.