origin - transform translate css

Sesgo de transformación de CSS3

Question

¿Alguien sabe cómo lograr un sesgo como este?

¿Usando la nueva propiedad de transformación de CSS?

Como pueden ver, estoy tratando de sesgar ambas esquinas, ¿alguien sabe si esto es posible?

Answer 1

2 métodos más:

1. Como se ve en https://css-tricks.com/examples/ShapesOfCSS/#trapezoid , puede usar border :

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

   pero no puede tener contenido, porque todo es frontera.

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

2. Use la transformación real ''skew'' de CSS:

   #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? */
   }

   Sin embargo, parece que no puedo ubicar el pseudo elemento detrás del elemento principal, por lo que el pseudo realmente cae sobre el contenido del elemento principal, si existe alguno.

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

Answer 2

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>​

Funciona en Chrome y FF 4: http://jsfiddle.net/rudiedirkx/349x9/

Esto podría ayudar: http://jsfiddle.net/rudiedirkx/349x9/2880/

Y esto también (del comentario de Erwinus): http://css-tricks.com/examples/ShapesOfCSS/

Answer 3

Creo que te refieres a la transformación de webkit. Consulta esta URL en http://www.the-art-of-web.com/css/3d-transforms/ para ayudarte.

Answer 4

En caso de que lo desee, utilice la matriz 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

Answer 5

Puede usar -webkit-perspective y -webkit-transform juntos.

<div style="-webkit-perspective:300;">
<div style="-webkit-transform:rotate3d(0, 1, 0, 30deg);width:200px;height:200px;background:#D73913;"></div>
</div>

Esto funciona solo en Safari.

Answer 6

Usa este código CSS Establezca los números de acuerdo a su necesidad

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

Answer 7

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

Luego HTML:

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

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

Answer 8

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

Esto funcionó para mí.