Menu
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?
508
CSS Demo: skew() This transformation is a shear mapping (transvection) that distorts each point within an element by a certain angle in the horizontal and vertical directions. The effect is as if you grabbed each corner of the element and pulled them along a certain angle.
Defines a 2D skew transformation along the X- and the Y-axis. skewX(angle) Defines a 2D skew transformation along the X-axis. skewY(angle) Defines a 2D skew transformation along the Y-axis.
Try this: To unskew the image use a nested div for the image and give it the opposite skew value. So if you had 20deg on the parent then you can give the nested (image) div a skew value of -20deg. @darthmaim's answer (below) to use a psuedo (before or after) to skew the inner border's should be the accepted answer.
The skewY() CSS function defines a transformation that skews an element in the vertical direction on the 2D plane. Its result is a <transform-function> data type.
.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
198
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
