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

學(xué)無(wú)先后,達(dá)者為師

網(wǎng)站首頁(yè) 編程語(yǔ)言 正文

利用css3實(shí)現(xiàn)立體旋轉(zhuǎn)動(dòng)畫(huà)效果

作者:不想敲代碼的小劉 更新時(shí)間: 2022-01-18 編程語(yǔ)言

css3實(shí)行一個(gè)轉(zhuǎn)動(dòng)的六邊形

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style>
			body,html {
				width: 100%;
				height: 100%;
			}
			body {
				perspective: 1000px;
			}
			.container {
				/* 給容器設(shè)置一個(gè)高寬 */
				width: 360px;
				height: 260px;
				/* 絕對(duì)布局 */
				position: absolute;
				left: 50%;
				top: 50%;
				transform: translate(-50%, -50%);
				/* 設(shè)置3D動(dòng)畫(huà) */
				transform-style: preserve-3d;
				transition: 3s;
				animation: m1 8s infinite;
			}
			/* 動(dòng)畫(huà)關(guān)鍵幀 */
			@keyframes m1{
				0%{
					transform:  translate(-50%,-50%) rotateY(0deg)
				}
				100%{
					transform:  translate(-50%,-50%) rotateY(100deg)
				}
			}
			/* img標(biāo)簽 */
			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);
			}
			/* 鼠標(biāo)懸停 */
			.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

欄目分類
最近更新