Un HTML 5 CSS 3 Tutorial; Creación de efectos especiales en 3D (Parte I): Bases de rotación


El objetivo de este tutorial es para demostrar los primeros pasos en la creación de un objeto animado en 3D. Nuestro objetivo es mostrar los ejemplos más simples que implican giros que dan la ilusión de un objeto giratorio. Desde allí durante el próximo tutorial vamos a "profundizar en" el objeto y hacerlo. animado. Por último, vamos a ver los requisitos para su distribución a generalizar en toda la gama de dispositivos de móvil a la computadora.

Paso # 1: Crear HTML Esqueleto

No debe haber nada misterioso en este marco, si ha hecho algún trabajo con HTML y CSS. Se hará todo lo posible para mantener el código exacto, pero mínima. Diferencias del navegador serán discutidos en el texto que acompaña sido, pero no pueden aplicarse plenamente en los ejemplos de código.




Introducción a CSS transformaciones 3D

creando un efecto 3D ....... Nuestro primer ejemplo requerirá una sección y un div .........

Perspectiva y transformación van de la mano

Para empezar es necesario comenzar a pensar en tres dimensiones. Para el plano plana del eje x y el eje y, se debe considerar un eje z. ¿Qué tan cerca o qué tan lejos está un objeto a usted.

Para crear este efecto en el código utiliza la transformada propiedades en combinación con la perspectiva de la propiedad. Para nuestros propósitos de este ejercicio, piense en una transformación en términos de una ración de un objeto alrededor tanto en el eje x o y. Para la perspectiva de pensar que, en relación con el eje z como el espectador está cerca del objeto siendo propiedad perspectiva viewed.The se define en términos de píxeles. Cuanto menor sea el valor es el más intenso (piense "objeto está más cerca") es el efecto 3D. Cuanto mayor sea el valor de esta propiedad es el menos intenso el efecto (piensa "el objeto está muy lejos").

La perspectiva se relaciona elementos sólo transformadas.

En este tutorial vamos a tratar de una perspectiva de valor en relación con los cambios en torno al eje x e y de diversos grados.

Codificación de valores diferentes perspectivas

Primero tenemos que definir un contenedor de referencia y un objeto a transformar.

El código para la designación del recipiente es:

.container {width: 200px; altura: 200px; frontera: 5px solid # C0C0C0; margin: 0 auto 20px; }

se puede pensar en como un "marco"

y el objeto de estilo se codifica como sigue:

.box {width: 100%; altura: 100%; } #purple .box {background-color: # ffff00; -webkit-transform: perspectiva (600px) rotateX (30deg); transform: perspectiva (600px) rotateX (30deg);}


Elementos HTML son simplemente una sección de un recipiente y para la caja:

Este es un X de rotación de 45 grados.

Instantáneas posteriores demuestran el impacto de modifyling perspectiva valor de la propiedad

propiedad Modificación Perspectiva valores

transformaciones que giran alrededor del eje Y

En las siguientes figuras, la rotateX método () se sustituye por el método RotateY ().

Transformaciones alrededor del eje Y

Configuración de la procedencia perspectiva Propiedad

La estructura final cubrirá en este tutorial es el origen perspectiva. Se necesitan dos valores. en relación con el eje x y el eje y. Los valores posibles son:

Definir donde la vista es en el eje x

Valores posibles:

  • centro
  • izquierda
  • derecho
  • longitud
  • o un porcentaje (%)

Valor por defecto: 50%

Definir donde la vista es en el eje y

Valores posibles:

  • fondo
  • centro
  • superior
  • longitud
  • o un porcentaje%

Valor por defecto: 50%. Los valores de x y posicionamiento eje x y se puede configurar para una inicial o heredan.


Varios Consideraciones importantes

Tal vez no es tan obvio al principio, pero cuando se define una perspectiva de la propiedad elemento, es la NIÑO elementos que atraen la vista en perspectiva, no el propio elemento. Tenga en cuenta la dentro o una caja definido dentro de un contenedor de uso en los ejemplos.

La perspectiva origen perspectiva requiere ser establecido; y la perspectiva de la propiedad no tiene un impacto sin conjunto de transformación.

Recapitulación y Lo Siguiente

En la siguiente parte de este tutorial transformaciones final 3D: transformaciones a lo largo del eje z. Entonces podemos empezar a buscar para construir objetos 3D experiencia importante .E 'estas transformaciones y perspectiva de valor como no todas las combinaciones son útiles.

Por favor, evalúe el Tutorial para la integridad

Tú! 1 2 3 4 5 5 de 5 estrellas 1 voto favor añadir una calificación y sus comentarios. Gracias!

(0)
(0)

Comentarios - 0

Sin comentarios

Añadir un comentario

smile smile smile smile smile smile smile smile
smile smile smile smile smile smile smile smile
smile smile smile smile smile smile smile smile
smile smile smile smile
Caracteres a la izquierda: 3000
captcha