学习探索-3d轮播卡片

miao_zz

已于 2022-07-26 09:51:56 修改

阅读量228

点赞数

分类专栏： css 文章标签： 3d css css3

于 2022-07-25 18:12:06 首次发布

本文链接：https://blog.csdn.net/qq_37117408/article/details/125980640

版权

css 专栏收录该内容

16 篇文章 0 订阅

订阅专栏

3d轮播卡片

- 效果示例图
- 代码示例

效果示例图

在这里插入图片描述

代码示例

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>3d轮播卡片</title>
		<style type="text/css">
			* {
				padding: 0;
				margin: 0;
				box-sizing: border-box;
			}

			.card-container {
				width: 150px;
				height: 75px;
				margin: 60px auto;
				position: relative;
				perspective: 300px;
			}

			.card-wrap {
				position: absolute;
				width: 100%;
				height: 100%;
				transform-style: preserve-3d;
				transform: rotateY(0deg) translateZ(-150px);
				animation: scroll 10s cubic-bezier(0.77, 0, 0.2, 1) infinite;
			}

			.card-item {
				width: 100%;
				height: 100%;
				position: absolute;
				/* 添加倒影 */
				-webkit-box-reflect: below 15px -webkit-linear-gradient(transparent 50%, rgba(255, 255, 255, 0.5));
			}

			.card-item:nth-of-type(1) {
				transform: rotateY(0deg) translateZ(150px);
			}

			.card-item:nth-of-type(2) {
				transform: rotateY(72deg) translateZ(150px);
			}

			.card-item:nth-of-type(3) {
				transform: rotateY(144deg) translateZ(150px);
			}

			.card-item:nth-of-type(4) {
				transform: rotateY(216deg) translateZ(150px);
			}

			.card-item:nth-of-type(5) {
				transform: rotateY(288deg) translateZ(150px);
			}

			@keyframes scroll {
				0% {
					transform: translateZ(-150px) rotateY(0deg);
				}

				20% {
					transform: translateZ(-150px) rotateY(-72deg);
				}

				40% {
					transform: translateZ(-150px) rotateY(-144deg);
				}

				60% {
					transform: translateZ(-150px) rotateY(-216deg);
				}

				80% {
					transform: translateZ(-150px) rotateY(-288deg);
				}

				100% {
					transform: translateZ(-150px) rotateY(-360deg);
				}
			}
		</style>
	</head>
	<body>
		<div class="card-container">
			<div class="card-wrap">
				<img class="card-item" src="img/1.jpg" />
				<img class="card-item" src="img/2.jpg" />
				<img class="card-item" src="img/3.jpg" />
				<img class="card-item" src="img/4.jpg" />
				<img class="card-item" src="img/5.jpg" />
			</div>
		</div>
	</body>
</html>