CSS Transform Skew [duplicate]

Question

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?

Genteel

Answer 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/

Garneau

This isn't skew, and it doesn't skew contents. – Emarie

Yup. It's a hack. It won't work with the background having a background color/image either: jsfiddle.net/rudiedirkx/349x9/411 – Garneau

What does content: "\0020"; do? – Disunite

20 (hex, 32 dec) is a space. You could use "" these days. No character necessary I think. – Garneau

In 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 – Yukoyukon

Answer 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

Epidiascope

Answer 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.

Mockery

This should be a comment, not an answer. Please do not post link-only answers to questions. – Fluted

Answer 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.

Baty

Answer 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);

Flyfish

Answer 6

Just in case you want, use matrix 3d.

  transform:matrix3d(
  1,0,1,0.003,
  0,1,0,0,
  0,0,1,0,
  0,0,0,1);

http://codepen.io/Logo/pen/jEMVpo

Tanga

Answer 7

.size{
   width: 200px;
   height: 200px;           
}
.boxContainer{
  -webkit-perspective:100;
}
.box{
  background: blue;
  -webkit-transform-origin-x:0;
  -webkit-transform: rotateY(10deg);
}


    <div class="size boxContainer">
        <div class="size box">

        </div>
    </div>

This worked for me.

Lodi

Answer 8

2 more methods:

1. As seen on https://css-tricks.com/examples/ShapesOfCSS/#trapezoid you can use border:

   #box {
     border-left: 200px solid black;
     border-top: 50px solid transparent;
     border-bottom: 50px solid transparent;
     width: 0;
     height: 100px;
   }
   

   but it can't have contents, because it's all border.

   Example: http://jsfiddle.net/rudiedirkx/349x9/3112/

2. Use CSS' actual 'skew' transform:

   #box {
     width: 200px;
     height: 170px;
     margin-top: 30px;
     background-color: black;
     transform: skewY(10deg);
     position: relative;
     z-index: 1; /* doesn't work? */
   }
   #box:before {
     content: "";
     display: block;
     width: 200px;
     height: 80px;
     position: absolute;
     bottom: -40px;
     left: 0;
     background-color: black;
     transform: skewY(-20deg);
     z-index: -1; /* doesn't work? */
   }
   

   I can't seem to position the pseudo element behind the main element though, so the pseudo actually falls over the main element's content, if any.

   Example: http://jsfiddle.net/rudiedirkx/349x9/3113/

Garneau