利用css3实现立体旋转动画效果

代码界的剑客

已于 2022-05-09 10:38:58 修改

阅读量1.4k

点赞数 5

文章标签： css3 机器学习

于 2022-01-07 19:37:36 首次发布

本文链接：https://blog.csdn.net/liu_sgxggs/article/details/122370958

版权

css3实行一个转动的六边形

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style>
			body,html {
				width: 100%;
				height: 100%;
			}
			body {
				perspective: 1000px;
			}
			.container {
				/* 给容器设置一个高宽 */
				width: 360px;
				height: 260px;
				/* 绝对布局 */
				position: absolute;
				left: 50%;
				top: 50%;
				transform: translate(-50%, -50%);
				/* 设置3D动画 */
				transform-style: preserve-3d;
				transition: 3s;
				animation: m1 8s infinite;
			}
			/* 动画关键帧 */
			@keyframes m1{
				0%{
					transform:  translate(-50%,-50%) rotateY(0deg)
				}
				100%{
					transform:  translate(-50%,-50%) rotateY(100deg)
				}
			}
			/* img标签 */
			img {
				width: 360px;
				/* height: 200px; */
				position: absolute;
				background-position: center;
			}

			.a1 {
				transform: rotateY(0deg) translateZ(300px);
			}

			.a2 {
				transform: rotateY(60deg) translateZ(300px);
			}

			.a3 {
				transform: rotateY(120deg) translateZ(300px);
			}

			.a4 {
				transform: rotateY(180deg) translateZ(300px);
			}

			.a5 {
				transform: rotateY(240deg) translateZ(300px);
			}

			.a6 {
				transform: rotateY(300deg) translateZ(300px);
			}
			/* 鼠标悬停 */
			.container:hover{
				/* transform:  translate(-50%,-50%) rotateY(110deg) */
			}
		</style>
	</head>
	<body>
		<div class="container">
			<img class="a1" src="images/img_0.jpg" />
			<img class="a2" src="images/img_1.jpg" />
			<img class="a3" src="images/img_2.jpg" />
			<img class="a4" src="images/img_3.jpg" />
			<img class="a5" src="images/img_4.jpg" />
			<img class="a6" src="images/img_5.jpg" />
		</div>
	</body>
</html>

新手小白大佬勿喷