perspective 3D effects and animation coordination

① There is a 3D perspective among the new features of HTML5

To complete the realization of the 3D effect, an indispensable attribute perspective must be set. The perspective sets the perspective of where the element is viewed. Simply put, it is the distance between the eyes and the screen. official name perspective

For example, set a 3D distance of 1000px to the box

perspective: 1000px;

To get started directly, two complete cases are added below to help you quickly become familiar with the style of this attribute.

The first one: 3D effect display

<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>

The renderings are as follows:

The second one: the implementation of 3D carousel chart.

<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>

The renderings are as follows:

Summary of perspective usage properties:

1. You need to define the perspective attribute and perspective-origin observer angle of the box.

2. Specify the sub-element transform-style:preserve-3d;,

3. Use transform to make child elements have a three-dimensional feel.

4. Use animation to define animation to make the box move.

perspective 3D effects and animation coordination

Guess you like