perspectiva, efectos 3D y coordinación de animación.

① Hay una perspectiva 3D entre las nuevas características de HTML5

Para completar la realización del efecto 3D se debe establecer un atributo indispensable perspectiva, la perspectiva establece la perspectiva desde donde se ve el elemento, en pocas palabras, es la distancia entre los ojos y la pantalla. Perspectiva del nombre oficial

Por ejemplo, establezca una distancia 3D de 1000 px al cuadro

perspective: 1000px;

Para comenzar directamente, a continuación se agregan dos casos completos para ayudarlo a familiarizarse rápidamente con el estilo de este atributo.

El primero: visualización de efectos 3D.

<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style>
			body{
				perspective: 2000px;  // 3D 视角属性
			}
			h2{text-align:center;}
			div{
				width:300px;
				height:300px;
			}
			div.rotateX,div.rotateY,div.rotateZ,div.rotate3d{
				border:3px solid black;
				margin:0 auto;
				/* 指定子元素在3维立体空间内 */
				transform-style:preserve-3d;
			}
			div.rotateX>div,div.rotateY>div,div.rotateZ>div,div.rotate3d>div{
				background:lightblue;
			}
			
			@keyframes rotatex{  //定义动画
				0%{transform:rotateX(0deg);}
				100%{transform:rotateX(180deg);}
			}
			div.rotateX>div{
				transform:rotateX(0deg);
				animation:rotatex 5s linear 0s infinite;
			}
			
			@keyframes rotatey{    
				0%{transform:rotateY(0deg);}
				100%{transform:rotateY(180deg);}
			}
			div.rotateY>div{
				transform:rotateY(0deg);
				animation:rotatey 5s linear 0s infinite;
			}
			
			@keyframes rotatez{
				0%{transform:rotateZ(0deg);}
				100%{transform:rotateZ(180deg);}
			}
			div.rotateZ>div{
				transform:rotateZ(0deg);
				animation:rotatez 5s linear 0s infinite;
			}
			
			div.rotate3d>div{
				transform:rotate3d(1,1,0,45deg);  // 
			}
		</style>
	</head>
	<body>
		<h2>rotateX</h2>
		<div class="rotateX">
			<div></div>
		</div>
		
		<h2>rotateY</h2>
		<div class="rotateY">
			<div></div>
		</div>
		
		<h2>rotateZ</h2>
		<div class="rotateZ">
			<div></div>
		</div>
		
		<h2>rotate3d</h2>
		<div class="rotate3d">
			<div></div>
		</div>
	</body>
</html>

Las representaciones son las siguientes:

El segundo: la implementación del gráfico carrusel 3D.

<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<style>
		body {
			perspective: 1000px; //定义盒子 3D 透视
                    //定义一个观察者的角度 X 轴、Y 轴
			perspective-origin: 50% -150%;
		}

		@keyframes runY {
			0% { 
                           //定义沿 Y 轴的 3D 旋转
				transform: rotateY(0deg);     
			}

			100% {
				transform: rotateY(360deg);
			}
		}

		div {
			width: 300px;
			height: 180px;
			margin: 400px auto;
			position: relative;
                   //所有子元素在 3D 空间中呈现。
			transform-style: preserve-3d;
                   //给盒子进行动画设置，让整体旋转。
			animation: runY 10s linear infinite;

		}

		div>img {
			width: 300px;
			height: 180px;
			position: absolute;
			border-radius:20px;
		}

		div>img:nth-of-type(1) {
                     //将图片设置为 3D 效果  可以自己调整
			transform: rotateY(0deg) translateZ(300px);
		}

		div>img:nth-of-type(2) {
			transform: rotateY(60deg) translateZ(300px);
		}

		div>img:nth-of-type(3) {
			transform: rotateY(120deg) translateZ(300px);
		}

		div>img:nth-of-type(4) {
			transform: rotateY(180deg) translateZ(300px);
		}

		div>img:nth-of-type(5) {
			transform: rotateY(240deg) translateZ(300px);
		}

		div>img:nth-of-type(6) {
			transform: rotateY(300deg) translateZ(300px);
		}
	</style>
	<body>
		<div>
			<img src="./img/1.jpg" alt="">  //请设置自己的图片
			<img src="./img/2.jpg" alt="">
			<img src="./img/3.jpg" alt="">
			<img src="./img/4.jpg" alt="">
			<img src="./img/5.jpg" alt="">
			<img src="./img/6.jpg" alt="">

		</div>
	</body>

</html>

Las representaciones son las siguientes:

Resumen de las propiedades de uso de la perspectiva:

1. Debe definir el atributo de perspectiva y el ángulo de observación del origen de la perspectiva del cuadro.

2. Especifique el subelemento transform-style:preserve-3d;,

3. Utilice la transformación para hacer que los elementos secundarios tengan una sensación tridimensional.

4. Utilice animación para definir la animación para hacer que el cuadro se mueva.

perspectiva, efectos 3D y coordinación de animación.

Supongo que te gusta