Usa la animación C3 para hacer un cubo 3D

1. Funciones de animación CSS3

Antes del advenimiento de CSS3, la animación se completaba con JavaScript cambiando dinámicamente los atributos de estilo del elemento. Aunque este método puede lograr la animación, existen algunos problemas en el rendimiento. La llegada de CSS3 ha hecho que la animación sea más fácil y tenga un mejor rendimiento.
La propiedad de "transición" de CSS3 logra algunos efectos de animación simples al configurar el cambio de un elemento dentro de un cierto período de tiempo, haciendo que ciertos efectos sean más ágiles y suaves. La propiedad "animación" de CSS3 permite cambios de estilo más complejos y algunos efectos interactivos sin usar ningún código de script Flash o JavaScript. La aparición de transiciones y animaciones hace que CSS ya no se limite a la simple visualización de contenido estático en el desarrollo front-end web, sino que mueva elementos de la página a través de métodos simples para lograr el cambio de estático a dinámico.

Segundo, las ventajas de CSS3

1. Reduce los costos de desarrollo y mantenimiento

Antes del advenimiento de CSS3, para lograr un efecto de esquina redondeada, los desarrolladores a menudo necesitaban agregar etiquetas HTML adicionales, usando una o más imágenes para completar, mientras que usar CSS3 solo requiere una etiqueta, usar la propiedad CSS3 border-radius para completar . De esta manera, la tecnología CSS3 puede liberar a las personas del trabajo de dibujar, cortar y optimizar imágenes. Si necesita ajustar el radio de las esquinas redondeadas o el color de las esquinas redondeadas más tarde, utilizando CSS2.1, debe dibujar desde cero y cortar la imagen para lograrlo. Con CSS3, solo necesita modificar el valor de la propiedad del radio del borde para modificarlo rápidamente.
La función de animación proporcionada por CSS3 permite a los desarrolladores mantenerse alejados de JavaScript al implementar algunos botones dinámicos o navegación dinámica, por lo que los desarrolladores no necesitan pasar mucho tiempo escribiendo guiones o buscando complementos de guiones adecuados para adaptarse a algunos efectos dinámicos del sitio web.

2. Mejora el rendimiento de la página

Muchas tecnologías CSS3 se convierten en "alternativas" a las imágenes al proporcionar los mismos efectos visuales. En otras palabras, al desarrollar web, reducir la cantidad de etiquetas adicionales que anidan y la cantidad de imágenes utilizadas significa que el contenido que los usuarios desean descargar Menos, la página se cargará más rápido. Además, una menor cantidad de imágenes, scripts y archivos Flash pueden reducir la cantidad de solicitudes HTTP cuando los usuarios visitan un sitio web, que es una de las mejores formas de aumentar la velocidad de carga de la página. El uso de CSS3 para crear un sitio web gráfico no requiere ninguna imagen, lo que reduce en gran medida el número de solicitudes HTTP y mejora la velocidad de carga de la página. Por ejemplo, el efecto de animación CSS3 puede reducir las solicitudes HTTP a archivos JavaScript y Flash, pero puede requerir que el navegador realice mucho trabajo para completar la representación de este efecto de animación, lo que puede hacer que el navegador responda lentamente y provoque la pérdida de usuarios. Por lo tanto, es necesario tener en cuenta claramente cuando se utilizan algunos efectos especiales complejos. De hecho, muchas tecnologías CSS3 pueden mejorar enormemente el rendimiento de la página bajo cualquier circunstancia [52].
CSS3 será totalmente compatible con versiones anteriores, por lo que no es necesario modificar el diseño para que sigan funcionando. El navegador web también continuará admitiendo CSS2.

3. Ejemplos

Entrada de instancia: Animal 3D

CSS样式结构

			:root{
				height: 100%;						// DOM根节点 html高度
			}
			body{
				height: 100%;
				margin: 0;
				perspective: 2000px;      			//	规定 3D 元素的透视效果（景深）
				perspective-origin: center 100px;	// 规定 3D 元素的底部位置
				transform-style: preserve-3d;		// 所有子元素在3D空间中呈现
			}
			.father{
				width: 300px;
				height: 300px;
				position: absolute;							
				top: calc(50% - 150px);				// father 页面垂直居中
				left: calc(50% - 150px);			// father 页面水平居中
				transform-style: preserve-3d;		// 规定被嵌套元素如何在 3D 空间中显示
				transform-origin: 0 0;				// 允许你改变被转换元素的位置（定义父容器坐标原点）
				/**
				 *	@ Animationl 动画	
				 *		属性：animation-*
				 *		属性值：value
				 *		animation-name：Name;				动画对象名
				 *		animation-duration：Time;			动画时长
				 *		animation-timing-function：Linear;	动画切换方式 
				 *		animation-delay：Time;				延迟执行时间
				 *		animation-iteration-count：Inf;		循环方式 次数/无限循环
				 *		animation-direction：Normal;		首尾间运行方式	交替/反向
				 *	
				 *	@ animation 简写方式
				 *		animation: name duration timing-function delay iteration-count direction;
				 */
				animation: Run 6s linear infinite alternate;
			}
			.contain{
				width: 300px;
				height: 300px;
				position: absolute;
				background-size: cover;
				border-radius: 10px;	// 圆角
				opacity: .5;			// 透明度
			}
			/**
			 *	@ Transform	向元素应用 2D 或 3D 转换
			 *		旋转：rotateX(angle)	定义沿 X 轴的 3D 旋转。
			 *			 rotateY(angle)	定义沿 Y 轴的 3D 旋转。
			 *			 rotateZ(angle)	定义沿 Z	 轴的 3D 旋转。
			 *		缩放：scaleX(x)		定义 3D 缩放转换，通过给定一个 X 轴的值
			 *			 scaleY(y)		定义 3D 缩放转换，通过给定一个 Y 轴的值
			 *			 scaleZ(z)		定义 3D 缩放转换，通过给定一个 Z	 轴的值
			 *		平移：translateX(x)	定义 3D 转化，仅使用用于 X 轴的值
			 *			 translateY(y)	定义 3D 转化，仅使用用于 Y 轴的值
			 *		 	 translateZ(z)	定义 3D 转化，仅使用用于 Z 轴的值
			 */
			.contain:nth-of-type(1){
				background-image: url(img/scene1.png);
				transform: rotateY(0deg) translateZ(150px);
			}
			.contain:nth-of-type(2){
				background-image: url(img/scene3.png);
				transform: rotateY(90deg) translateZ(150px);
			}
			.contain:nth-of-type(3){
				background-image: url(img/scene1.png);
				transform: rotateY(180deg) translateZ(150px);
			}
			.contain:nth-of-type(4){
				background-image: url(img/scene3.png);
				transform: rotateY(270deg) translateZ(150px);
			}
			.contain:nth-of-type(5){
				background-image: url(img/scene4.png);
				transform: rotateX(90deg) rotateZ(180deg) translateZ(150px);
			}
			.contain:nth-of-type(6){
				background-image: url(img/scene4.png);
				transform: rotateX(270deg) translateZ(150px);
			}
			/**
			 *	 @keyframes 创建动画，把它绑定到一个选择器
			 *		规定变化发生的时间：
			 *			1. 用关键词 "from" 和 "to"，"from"是动画的开始，"to" 是动画的完成
			 *			2. 0% 是动画的开始，100% 是动画的完成。
			 *		为了得到最佳的浏览器支持，推荐使用 0% —— 100% 选择器
			 */
			@keyframes Run{
				0%{
					transform: rotateY(0deg) rotateX(180deg);
				}
				50%{
					transform: rotateY(180deg) rotateX(360deg);
				}
				100%{
					transform: rotateY(360deg) rotateX(0deg);
				}
			}

html 主体

	<div class="father">				// 父容器	father
		<div class="contain"></div>		// 立方体各面 contain
		<div class="contain"></div>
		<div class="contain"></div>
		<div class="contain"></div>
		<div class="contain"></div>
		<div class="contain"></div>
	</div>

~~~~~~~~~~~~~~~~ FIN ~~~~~~~~~~~~~~~~