七夕節表白3d相簿製作(html5+css3)

zh發表於2020-08-23
3DHTMLCSSS3

七夕節表白3d相簿製作

涉及知識點

  • 定位
  • 陰影
  • 3d轉換
  • 動畫

主要思路：

透過定位將所有照片疊在一起，在設定預設的樣式以及照片的佈局，最後透過設定盒子以及照片的旋轉動畫來達到效果。
程式碼如下：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>3d相簿</title>
		<style type="text/css">
			/* 使用單位將所有照片疊在一起 */
			img{
				width: 200px;
				position: absolute;
				/* 照片加陰影 */
				box-shadow: 0 0 8px black;
				/* 照片圓角 */
				border-radius: 5px;		
			}
			#album{
				width: 200px;
				height: 267px;
				margin: 250px auto;
				/* 父元素設定保留3d效果,這樣子子元素的3d效果就可以顯示出來 */
				transform-style: preserve-3d;
				/* 呼叫動畫 */
				animation: xuanzhuan 20s linear infinite;
			}
			body{
				/* 設定視距,更好的觀察3d效果 */
				perspective: 800px;
				background-image: url(image/bg2.jpg);
				overflow: hidden;
			}
			@keyframes xz{
				/* 設定每張照片獨自的旋轉效果動畫 */
				0% {
					transform: rotateY(0deg);
				}
				100% {
					transform: rotateY(360deg);
				}
			}
			@keyframes xuanzhuan{
				/* 設定整個照片容器的旋轉動畫 */
				from{
					transform: rotateY(0deg);
				}
				to{
					transform: rotateY(360deg);
				}
			}
			#album div[class^="box"] {
				transform-style: preserve-3d;
			}
			#album div[class^="box"] img {
				animation: xz 20s linear infinite;
			}
			/* 設定每張圖片的預設旋轉樣式以及佈局 */
			#album .box1 {
				transform: rotateY(0deg) translateZ(200px);
			}
			#album .box2 {
				transform: rotateY(60deg) translateZ(200px);
			}
			#album .box3 {
				transform: rotateY(120deg) translateZ(200px);
			}#album .box4 {
				transform: rotateY(180deg) translateZ(200px);
			}
			#album .box5 {
				transform: rotateY(240deg) translateZ(200px);
			}
			#album .box6 {
				transform: rotateY(300deg) translateZ(200px);
	        }
		</style>
	</head>
	<body>
		<div id="album">
			<div class = "box1"><img src="image/1.jpg" ></div>
			<div class = "box2"><img src="image/2.jpg" ></div>
			<div class = "box3"><img src="image/3.jpg" ></div>
			<div class = "box4"><img src="image/4.jpg" ></div>
			<div class = "box5"><img src="image/5.jpg" ></div>
			<div class = "box6"><img src="image/6.jpg" ></div>
		</div>
	</body>
</html>

其中程式碼還存在一些最佳化，讀者自行最佳化。
祝讀者們早日脫單！！！

相關文章