CSS 3D Transform ángulo de emisión

estoy usando CSS 3 para llevar a cabo la siguiente transformación en un div:CSS 3D Transform ángulo de emisión

'-webkit-transform' : 'rotateX(45deg) rotateZ(-45deg)'

El resultado es como:

enter image description here

o como en este violín : http://jsfiddle.net/kteSW/

Como podemos ver aquí, el ángulo es 36deg, en lugar de 30deg (sin45 * sin45). ¿Alguien sabe el motivo de este problema? ¿Esto es intencionado o es un error de CSS3?

ACTUALIZACIÓN:

Ya he configurado los parámetros a ser:

-webkit-transform-style: preserve-3d; -webkit-perspective: none;

Así que todo debe ser renderizado de una manera ortogonal. Sin embargo, el ángulo aún no es 30deg.

Fuente

2012-08-02 Felix Chan

Sus cálculos suponen un modelo de representación isométrica. CSS 3D utiliza [representación 3D de perspectiva] (http://www.w3.org/TR/css3-3d-transforms/#transform-rendering). –

Gracias Raymond. ¿Hay alguna manera de habilitar la representación isométrica de CSS 3D? Estamos usando WebKit en iOS. –

Las transformaciones no son transiciones, no las mezcles. He editado las etiquetas por ti. – BoltClock

Lo que estamos tratando de lograr es calcular el ángulo entre el ojo y el eje Z cuando vemos (0, 0, 0) de (1, 1, 1).

Así que en realidad es (90 deg) - arctan(1/sqrt(2)) = 54.7356103 deg, no 45deg.

Fuente

2012-08-06 09:51:11

CSS 3D Transform ángulo de emisión

Respuesta

Cuestiones relacionadas