日本免费高清视频-国产福利视频导航-黄色在线播放国产-天天操天天操天天操天天操|www.shdianci.com

學無先后，達者為師

網站首頁 編程語言 正文

利用css3實現立體旋轉動畫效果

作者：不想敲代碼的小劉 更新時間： 2022-01-18 編程語言

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>

新手小白大佬勿噴

原文鏈接：https://blog.csdn.net/liu_sgxggs/article/details/122370958

欄目分類
最近更新