Share
Hay algunos ejemplos asombrosos de transformaciones y transiciones de CSS, y aunque puede que te sorprendan, ¡hay muchas posibilidades de que te sientas abrumado y un poco intimidado! Este tutorial lo llevará de vuelta a lo más básico. Vamos a crear algunos movimientos fundamentales de transición CSS3, paso a paso..
El soporte en los navegadores ya es bastante razonable. Firefox 3.5, Chrome, Opera 10.5, Safari 3.1 e Internet Explorer 9.0 lo tienen cubierto en lo que respecta a las transformaciones. IE es un poco menos complaciente con respecto a las transiciones, aunque el soporte está planeado para IE10.
Para ayudar a entender el movimiento fácilmente, estaremos trabajando en una cuadrícula de ejes (que probablemente reconocerá de matemáticas básicas). Estaremos usando X y y Coordenadas para mover nuestros objetos..
La única diferencia (crucial) es que en nuestro eje el valor -y es encima El eje x, mientras que normalmente estaría por debajo de él. ¿Por qué? Bueno, HTML y CSS (junto con otras tecnologías web como ActionScript) utilizan un invertida Sistema de coordenadas cartesiano porque las páginas web comienzan desde la parte superior izquierda y leen hacia abajo. Así que ya sabes :)
Nota: Voy a asumir que ya estás familiarizado con la estructura de archivos HTML y CSS. Voy a omitir explicando cómo configurar el archivo CSS, colocando imágenes y diseñando el estilo del Eje. Nuestro enfoque será en la animación de los objetos. Si no está seguro de que sus conocimientos de HTML + CSS estén a la altura, consulte los nuevos Tuts + Premium HTML y CSS en 30 días (que es gratis) y aprenderá todo lo que necesita saber.
El primer movimiento que demostraremos es "horizontal"; Animaremos el objeto para que se mueva hacia la derecha y hacia la izquierda..
Para mover un objeto desde su posición inicial usamos: transformar: traducir (x, y);, donde el valor de x debe ser positivo y el valor de y debe ser 0 para mover el objeto a la derecha.
Abra su editor de texto favorito e ingrese el siguiente código html, luego guarde el archivo.
Hemos asignado tres clases a la imagen:
En primer lugar, colocaremos el objeto (nuestra imagen de la furgoneta) en el centro de la cuadrícula.
.objeto posición: absoluta; .van top: 45%; izquierda: 44%;
En este ejemplo vamos a mover el objeto 350px a la derecha. La sintaxis es transformar: traducir (350px, 0); y el objeto se moverá cuando el Eje esté sobre. Por eso lo declaramos con # eje: mueva el cursor hacia la derecha.
# eje: desplace .move-derecha transformar: traducir (350px, 0); -webkit-transform: translate (350px, 0); / ** Chrome & Safari ** / -o-transform: translate (350px, 0); / ** Opera ** / -moz-transform: translate (350px, 0); / ** Firefox ** /
La propiedad de transformación CSS solo moverá el objeto de un punto a otro, no se animará entre los dos estados. Para hacer esto necesitamos agregar una propiedad de transición en la clase .object.
.objeto posición: absoluta; transición: todos los 2s de fácil salida; -webkit-transición: todos los 2s de facilidad de entrada; / ** Chrome & Safari ** / -moz-transition: todos los 2s de facilidad de entrada; / ** Firefox ** / -o-transición: todos los 2s de facilidad de entrada; / ** Opera ** /
Esta regla de transición le dirá al navegador que anime todos propiedades adjuntas al objeto para 2 segundos usando una facilidad de entrada función de temporización (interpolación), sin demora.
Podemos usar 6 tipos de funciones de tiempo de transición:
Para mover un objeto a la izquierda simplemente necesitamos ingresar un valor negativo en el X coordinar, mientras que el y la coordenada debe permanecer 0. En este ejemplo moveremos el objeto. -350px a la izquierda.
Cree otro archivo HTML e ingrese el siguiente marcado.
Esta vez usamos el mover hacia la izquierda clase para establecer la regla css para mover el objeto a la izquierda.
Luego, ingresamos -350px como la coordenada x. transformar: traducir (-350px, 0); para mover el objeto a la izquierda. Bastante fácil, cierto?
# eje: desplace .move-left transform: translate (-350px, 0); -webkit-transform: translate (-350px, 0); / ** Safari y Chrome ** / -o-transform: translate (-350px, 0); / ** Opera ** / -moz-transform: translate (-350px, 0); / ** Firefox ** /
Ya que hemos establecido previamente la regla de transición en nuestra clase .object, no necesitamos establecerla nuevamente.
Mover un objeto verticalmente es bastante fácil, casi idéntico a moverse horizontalmente. La única diferencia es que usaremos el valor -y para mover el objeto hacia arriba y el valor y para moverlo hacia abajo.
El marcado HTML es idéntico a los dos ejemplos anteriores. Sin embargo, estamos reemplazando el objeto con un cohete (con fines ilustrativos), y la clase que usamos para nuestro movimiento ascendente es ascender.
Al igual que con nuestra camioneta, colocaremos el cohete en el centro de la cuadrícula:
.cohete arriba: 43%; izquierda: 44%;
Como hemos mencionado anteriormente, la coordenada y debería ser negativa, para mover el cohete hacia arriba. En este caso lo movemos 350px arriba..
#axis: desplazarse .mover-up transformar: traducir (0, -350px); -webkit-transform: translate (0, -350px); -o-transformar: traducir (0, -350px); -moz-transform: translate (0, -350px);
El método para mover un objeto hacia abajo es (sorpresa, sorpresa) lo opuesto a moverse hacia arriba; el valor de la coordenada y debe ser positivo y la coordenada x debe permanecer en 0. La sintaxis es transformar: traducir (0, y);
En este ejemplo, demostraremos un movimiento hacia abajo usando una moneda. Genio!
#axis: hover .move-down transform: translate (0,350px); -webkit-transform: translate (0,350px); -o-transformar: traducir (0,350px); -moz-transform: translate (0,350px);
Para crear una transición diagonal, combinaremos valores de ambas coordenadas X y y. La sintaxis debe ser transformar: traducir (x, y). Dependiendo de la dirección, el valor de X y y podría ser negativo o positivo.
Y para demostrar nuestro movimiento diagonal, usaremos un plano de papel..
Dirigiremos el movimiento hacia el noreste. Para el X valor de coordenadas ingresamos un valor positivo (350px) y para el y En las coordenadas ingresamos un valor negativo (-350px). La sintaxis por lo tanto se verá así: transformar: traducir (350 px, -350 px);
#axis: hover .move-ne transform: translate (350px, -350px); -webkit-transform: translate (350px, -350px); -o-transform: translate (350px, -350px); -moz-transform: translate (350px, -350px);
Siéntase libre de experimentar y dirigir el movimiento de objetos a lo largo de los otros ejes diagonales.
El movimiento de rotación en CSS3 se regula mediante una coordenada radial de 0 ° a 360 °. Para rotar un objeto simplemente aplique la siguiente propiedad css: transformar: rotar (ndeg); dónde norte es el grado de rotacion.
Para rotar un objeto en el sentido de las agujas del reloj, ingresamos un valor positivo para el rotar (ndeg) propiedad.
Para este ejemplo usaremos un lápiz para demostrar el movimiento..
Y rotaremos el objeto 360 grados en sentido horario..
# eje: desplace .rotate360cw transform: rotate (360deg); -webkit-transform: rotate (360deg); -o-transformar: rotar (360deg); -moz-transform: rotate (360deg);
Para realizar una rotación en sentido contrario a las agujas del reloj, ingresamos (usted lo adivinó) un valor negativo.
Seguimos usando el lápiz como nuestro objeto, pero cambiaremos su clase a .rotate360ccw.
# eje: desplace .rotate360ccw transformar: rotar (-360deg); -webkit-transform: rotate (-360deg); -o-transformar: rotar (-360deg); -moz-transform: rotar (-360deg);
La escala es una característica interesante en CSS3. Al utilizar la propiedad scale (n) o scale (x, y) podemos ampliar o reducir un objeto dentro de nuestro HTML. El objeto se escalará de acuerdo con n / x, valor de y, donde el eje x es para el ancho y el eje y representa la altura. Por ejemplo, si ingresamos a la escala (2), el objeto se escalará dos veces (200% más grande) a lo largo de ambos ejes, desde su dimensión inicial.
Echemos un vistazo al siguiente ejemplo..
En este ejemplo, aumentaremos el tamaño del automóvil en un 200%, dando la ilusión de que el automóvil se está acercando (con suerte).
Nuevamente, el formato HTML apenas ha cambiado, pero esta vez usamos un automóvil como objeto.
#axis: hover .larger transform: scale (2); -webkit-transform: scale (2); -o-transformada: escala (2); -moz-transform: scale (2);
Después de haber jugado con movimientos básicos y transformaciones, ahora trataremos de combinar algunos de ellos. Vamos a ver.
Esta vez, usaremos un boomerang para demostrar la animación..
El plan es mover el boomerang en diagonal, mientras se realizan rotaciones al mismo tiempo. Para hacer esto, simplemente tenemos que listar las transformaciones, separadas por espacios.
#axis: hover .multiple transform: translate (350px, -350px) rotate (360deg); -webkit-transform: translate (350px, -350px) rotate (360deg); -o-transform: translate (350px, -350px) rotate (360deg); -moz-transform: translate (350px, -350px) rotate (360deg);
Estos son ejemplos básicos, ¡y hay un gran margen para desarrollarlos aún más! Recuerde: tenga en cuenta el soporte del navegador cuando utilice las propiedades de CSS3 y no se vuelva loco con estos efectos: deberían mejorar su diseño, no ahogarlo!
Para más inspiración, eche un vistazo a algunas de las geniales animaciones y efectos de CSS3 en Envato Market. Aquí están algunos ejemplos:
Estas magníficas, sutiles y útiles transiciones de giro, fundido y brillo de CSS3 lo ayudan a ampliar las propiedades inmobiliarias de un sitio web y utilizar su espacio de manera más efectiva. Cualquier contenido, incluidos videos, mapas, imágenes, etc., se puede voltear (o desvanecer).
Flip 'n' Fade amigable en Envato MarketEsta es una utilidad basada en CSS / jQuery que te permitirá crear un efecto de fondo de cielo nocturno animado inusual para tu sitio web.
Fondo animado del cielo nocturno en el mercado de EnvatoEste es un kit de Pure CSS3 Loader Animations. Estos 15+ efectos de animación CSS3 son compatibles con todos los principales navegadores.
Animaciones del cargador puro CSS3 en Envato MarketEsta es una colección de cinco títulos de imagen animados solo para CSS. Este kit ofrece algunos efectos excelentes y le ahorrará mucho tiempo al crear sitios web.
tFigure - Subtítulos de imagen en Envato MarketEste elemento le permite construir su propia cuadrícula de mosaico con sus redes sociales para el personal y más. Incluye 28 iconos sociales y una gama de diferentes configuraciones de cuadrícula..
Mosaico social de la pared en el mercado de Envato
Accentsconagua
