rectángulo CSS3 matrix3d a la transformación trapezoidal

Estoy tratando de utilizar el soporte webkit para CSS3 transform: matrix3d(<matrix>) para crear un efecto de 'caída de la tarjeta'. (El único objetivo para la salida de este es Chrome)rectángulo CSS3 matrix3d a la transformación trapezoidal

El efecto final debe transición a través de las 4 etapas siguientes y terminar como sólo una línea horizontal:

enter image description here

Aquí es el CSS tengo ahora:

#test { 
      margin: auto auto; 
      height: 200px; 
      width: 200px; 
      border:1px solid black; 
      background-color: lightblue; 
      -webkit-perspective: 1000; 
      -webkit-transform-origin: 50% 100%; 
      -webkit-transform-style: preserve-3d; 
      -webkit-animation-name: flip-card;   
      -webkit-animation-duration: 1s;   
      -webkit-animation-iteration-count: infinite;   
      -webkit-animation-timing-function: linear; 
      -webkit-box-shadow: 0px 5px 20px rgba(0, 0, 0, 0.5); 
     } 
     @-webkit-keyframes flip-card { 
      0% {-webkit-transform: ;} 
      100% {-webkit-transform: 
         matrix3d(1, 0, 0, 0, 
           0, 1, 0, 0, 
           0, 0, 0, 0, 
           0, 0, 0.001, 1);} 
     }

Y el HTML es simple para la prueba:

<body> 
    <div id="test">this div should fall forward...</div> 
</body>

El matrix3d en el anterior se basó en la lectura this SO question, pero produce un cuadrado que se contrae y gira alrededor del eje x definido por la parte inferior del recuadro inicial.

Entiendo que la matriz CSS 2d solo puede producir rectángulos y paralelogramos mediante la transformación de un recuadro y que las formas irregulares necesitan la operación de transformación matrix3d (this fue útil para refrescar mi álgebra lineal desvanecida), pero parece que solo puedo para producir rectángulos y paralelogramos.

He examinado algunas de las preguntas SO etiquetadas con matrix y transformation. La mayoría de ellos no están basados en CSS y no he podido obtener la transformación que deseo.

Fuente

2011-02-10 beggs

he creado una herramienta para jugar con los valores de transformación css aquí: http://www.duopixel.com/ stack/webkitmatrix /, pero me temo que no podría producir un trapezoide con Chrome. Darle una oportunidad. – Duopixel

@Duopixel: es una gran herramienta. Puedo hacer un trapezoide en Safari ... pero sesgado en el eje Y, no en el eje X, moviendo el control deslizante Row-1, Column4 (el control deslizante superior derecho). En Chrome, ese mismo control deslizante crea un paralelogramo. Tengo entendido que debería mover el control deslizante Row-4, Column-3 para crear el paralelogramo del eje X, pero no tiene efecto en Safari o Chrome. – beggs

Este [Filo de CoffeeScript] (http://franklinta.com/2014/09/08/computing-css-matrix3d-transforms/#cp_embed_ifnqH) puede ser útil. La página del blog en la que está incrustada también tiene algunas explicaciones útiles. – mbomb007

-webkit-perspective aún no funciona en Chrome (solo Safari), por lo que esto no funcionará (prueba tu código en Safari). También las transformaciones 3D en Chrome, en general, son un tanto dudosas, y no se combinan bien con degradados, por ejemplo.

También rotate3d (1, 0, 0, 90deg) funciona tan bien como una matriz para lograr lo que estás haciendo. La notación de matriz es solo una forma breve de combinar rotación 3D, sesgo, movimiento y origen en una sola matriz. Como solo está girando alrededor del eje x, no necesita ir a estas longitudes.

webkit-transform: perspective(800) rotate3d(1, 0, 0, -90deg)

es exactamente lo que necesita.

Actualización: Aquí es una link to a jsfiddle con exactamente lo que está buscando que funciona tanto en Chrome y Safari. Tenga en cuenta que es importante especificar que el origen de la transformación para el giro es el mismo que el origen para la perspectiva. El origen de Webkit-perspective especifica dónde está la "cámara" en el espacio 3D en relación con cualquier transformación 3D y es fácil obtener resultados poco intuitivos si no tienes cuidado.

segunda actualización: perspectiva es ahora compatible con todos los navegadores borde (aunque suavizado de Firefox tiene poco recomendable (y necesita -moz obviamente))

tercera actualización: Actualizado el violín para el navegador cruz por Firefox, IE y sin prefijo.

Fuente

2011-02-10 16:11:56

Interesante, estaba usando rotateX() pero no proporciona la perspectiva de que el objeto está cayendo hacia adelante. Agregué varios ajustes de perspectiva y marcos clave, pero nunca pude obtener el efecto '3D'. Voy a probar Safari y ver qué es diferente. – beggs

He intentado los cambios de perspectiva en safari 5.0.3 (windows) y no hay ningún efecto. En la herramienta que @Duopixel mencionó en su comentario, no puedo obtener el trapecio del eje X, solo un eje Y en Safari, mientras que Chrome solo producirá un paralelogramo del eje Y. Parece que la respuesta es "imposible". – beggs

Estaba leyendo la especificación de transición CSS cuando noté que el ancho del borde es animable, y puede falsificar trapezoides utilizando anchuras de borde. ¡Esto significa que puedes falsificar cartas que caen en Chrome, Opera y FF4!

#stage { 
    margin-top: 200px; 
    position: relative; 
} 

#trapezoid { 
    position: absolute; 
    bottom: 0; 
    border: solid 1px #fff; 
    border-bottom: solid 200px #c00; 
    width: 200px; 
    -webkit-transition: all ease 1s; 

} 

#stage:hover #trapezoid { 
    border: solid 50px #fff; 
    border-bottom: solid 20px #f11; 
    width: 100px; 

}

Por supuesto, esto tiene importantes salvedades: en su ejemplo la tarjeta está cayendo hacia delante, he intentado, pero parece que esto no es posible con esta técnica. Cualquier contenido dentro de la forma no se transformará, es solo la forma de la tarjeta. Ah, y la forma de la tarjeta no puede tener ningún borde. Principales inconvenientes que limitan su aplicación en la vida real.

Aún así, ¡es genial! Jugar con él aquí: http://jsfiddle.net/mxgAu/

Fuente

2011-02-18 06:28:31 Duopixel

Pero no podrías poner nada dentro. –

Sí, pero no sin algunos trucos. Después de escribir esta respuesta, encontré que ya hay un complemento jQuery que hace esto: http://lab.smashup.it/flip/. – Duopixel

¡Oh, mierda! 3D volteando sin CSS3 3D! http://archive.dojotoolkit.org/nightly/dojotoolkit/dojox/fx/tests/test_flip.html –

Si está utilizando IE10, a continuación, la solución podría ser:

.up{ 
    -ms-transform-origin: 50% 100%; 
    -ms-transform: perspective(100px) rotateX(7deg); 
} 

.down{ 
    -ms-transform-origin: 50% 0%; 
    -ms-transform: perspective(100px) rotateX(-7deg) scale(1); 
}

Fuente

2012-02-21 13:59:58 frantisek

rectángulo CSS3 matrix3d ​​a la transformación trapezoidal

Respuesta

Cuestiones relacionadas

rectángulo CSS3 matrix3d a la transformación trapezoidal