欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页

轮播图

程序员文章站 2023-12-30 17:13:28
...
在这里插入代码片<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style>
			body {
				perspective: 1000px;
			}
			section {
				width: 300px;
				height: 200px;
				margin: 100px auto;
				background-color: #4169E1;
				background: url(cutterman/图层143.png) no-repeat;
				background-size: cover;
				position: relative;
				transform-style: preserve-3d;
				transition:  3s linear;
			}
			section:hover  {
				transform: rotateY(360deg);
			}
			div {
				width: 100%;
				height: 100%;
				background: url(img/abcd.jpg) no-repeat;
				background-size: cover;
				top: 0;
				left: 0;
			    position:absolute ;
			}
			section div:nth-child(1) {
				transform: rotateY(0) translatez(400px);
			}
			section div:nth-child(2) {
				transform: rotateY(60deg) translatez(400px);
			}
			section div:nth-child(3) {
				transform: rotateY(120deg) translatez(400px);
			}
			section div:nth-child(4) {
				transform: rotateY(180deg) translatez(400px);
			}
			section div:nth-child(5) {
				transform: rotateY(240deg) translatez(400px);
			}
			section div:nth-child(6) {
				transform: rotateY(300deg) translatez(400px);
			}
		</style>
	</head>
	<body>
		<section>
		   <div></div>
		   <div></div>
		   <div></div>
		   <div></div>
		   <div></div>
		   <div></div>
		</section>
	</body>
</html>

对于transform-style:persevere-3d的理解应用;
body中需加上 perspective,(遵循近大远小的原理);
translatez()

上一篇:

下一篇: