旋转轮播图

最新推荐文章于 2021-10-31 23:46:58 发布

凡小多

最新推荐文章于 2021-10-31 23:46:58 发布

阅读量287

点赞数 1

分类专栏： HTML+CSS

本文链接：https://blog.csdn.net/wgh4318/article/details/117373810

版权

HTML+CSS 专栏收录该内容

53 篇文章 1 订阅

订阅专栏

旋转轮播图

这个效果我们需要用到透视过渡还有子元素 preserve-3d

transform-style

transform-style属性是3D空间一个重要属性，指定嵌套元素如何在3D空间中呈现。他主要有两个属性值：flat和preserve-3d

其中flat值为默认值，表示所有子元素在2D平面呈现。preserve-3d表示所有子元素在3D空间中呈现。

<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="utf-8">
		<style>
			body {
				perspective: 1000px;
			}

			section {
				width: 300px;
				height: 200px;
				margin: 100px auto;
				background: url(images/img-1.jpg) no-repeat;
				background-size: cover;
				position: relative;
				transform-style: preserve-3d;
				/* 让父盒子里面的子盒子以3d效果显示 */
				transition: 5s linear;
				/* 匀速  all 是可以省略的， 省略默认的all*/
			}

			section:hover {
				transform: rotateY(360deg);
			}

			section div {
				width: 100%;
				height: 100%;
				background: url(images/0.jpg) no-repeat;
				background-size: contain;
				position: absolute;
				top: 0;
				left: 0;
			}

			section div:nth-child(1) {
				transform: rotateY(0deg) 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>