perspective 3D 效果和动画配合

① 在 HTML5 新特性中有一个 3D 视角

完成 3D 效果的实现必须设置一个必不可少的属性 perspective 视角设置元素被查看位置的视角，简单的说就是眼睛距离屏幕的距离。官方名称透视

例如给盒子设置一个 1000px 的 3D 距离

perspective: 1000px;

直接上手，以下补充两个完整的案例，帮助快速的熟悉这个属性的样式。

第一个：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>

效果图如下：

第二个：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>

效果图如下：

perspective 使用属性总结：

1. 需要给盒子定义 perspective 属性和 perspective-origin 观察者角度

2.指定子元素在3维立体空间内 transform-style:preserve-3d;、

3.利用 transform 使子元素有立体感。

4.使用 animation 定义动画让盒子动起来。

perspective 3D 效果和动画配合

猜你喜欢