使用transform製作書本翻頁效果

空城機發表於2020-11-06
ORM

transform

  • transform屬於CSS屬性
  • Transform屬性應用於元素的2D或3D轉換。這個屬性允許你將元素旋轉，縮放，移動，傾斜等。
    在這裡插入圖片描述
    在網頁中需要製作一些有立體感的3d效果，比如書本翻頁

tansform中有一個rotate旋轉屬性

屬性功能
rotate(angle)定義 2D 旋轉，在引數中規定角度。
rotate3d(x,y,z,angle)定義 3D 旋轉。
rotateX(angle)定義沿著 X 軸的 3D 旋轉。
rotateY(angle)定義沿著 Y 軸的 3D 旋轉。
rotateZ(angle)定義沿著 Z 軸的 3D 旋轉。

書本的翻頁主要圍繞書本軸線進行左右翻動書本

例子為書本從合起狀態到開啟狀態
首先定義一本書本div

<style>
	.outbookPage {
		margin: 100px auto;
		width: 586px;
		height: 632px;
		perspective: 2000px;
		background:gray ;
		box-shadow: 0 0 10px #999;
	}
</style>
<div class="outbookPage">			
</div>

效果：
在這裡插入圖片描述

在此div中設定好perspective，這是使用者相對於螢幕的遠近距離，之後翻頁效果出現時perspective值越近，翻轉效果越明顯。

在outbookPage中編寫要進行旋轉的子div元素

<style>
	.outbookPage {
		margin: 100px auto;
		width: 586px;
		height: 632px;
		perspective: 2000px;
		background:gray ;
		box-shadow: 0 0 10px #999;
	}
	.innerBookPage {
		width: 100%;
		height: 100%;
		background-color: #333333;
		/* 向外面旋轉  */
		transform: rotateY(-40deg); 
		transform-origin: 0 0;
		font-size: 40px;
		text-align: center;
		color: white;
		z-index: 5;
	}
</style>
<div class="outbookPage">
	<div class="innerBookPage">
		封面
	</div>
</div>

效果： 當前為靜態效果，如果想要製作完整的動畫翻頁效果可以使用animation，但是需要注意的是animation只能支援IE10+。
tansform:rotateY( 定義的角度 ) 代表讓div元素繞Y軸進行3d旋轉。 rotateY也只支援IE10+
在封面div旋轉到背面之後可以使用backface-visibility: hidden; 對背面進行隱藏。
此時封面旋轉到一般就消失了
在這裡插入圖片描述

為了讓封面旋轉到一半後消失出現第一頁，可以給封面div新增兄弟元素，即第一頁的div。

注意此處第一頁的div需要進行180度翻轉，這樣旋轉之後才能正向顯示。
同樣需要進行背部隱藏： backface-visibility: hidden;

完整程式碼：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		
		<style type="text/css">
			.outbookPage {
				margin: 100px auto;
				width: 586px;
				height: 632px;
				perspective: 2000px;
				background:gray ;
				background-position: 100% 0%;
				box-shadow: 0 0 10px #999;
			}
			.innerBookPage {
				width: 100%;
				height: 100%;
				background-color: #333333;
				/* 向外面旋轉  */
				transform: rotateY(-20deg); 
				transform-origin: 0 0;
				animation: openbook 3s forwards;
				font-size: 40px;
				text-align: center;
				color: white;
				backface-visibility: hidden;
				z-index: 5;
			}
			.innerfirstPages {
				width: 100%;
				height: 100%;
				background: burlywood;
				background-size: 100% 100%;
				position: absolute;
				top: 0;
				left: -100%;
				font-size: 40px;
				text-align: center;
				animation: openbook2 3s forwards;
				transform: rotateY(180deg);
				transform-origin: 100% 0;
				backface-visibility: hidden;
			}
			@keyframes openbook{
				0%{
					transform: rotateY(0deg) scaleX(1);
				}
				100%{
					transform: rotateY(-180deg) scaleX(1);
				}
			}
			@keyframes openbook2{
				0%{
					transform: rotateY(180deg) scaleX(1);
				}
				100%{
					transform: rotateY(0deg) scaleX(1);
					box-shadow: 0 0 10px #999;
				}
			}
		</style>
	</head>
	<body>
		
		<div class="outbookPage">
			<div class="innerBookPage">
				封面
			</div>
			<div class="innerfirstPages">
				第一頁內容
				1111111111111
				222222222222222
			</div>
		</div>
		
	</body>
</html>

效果：
在這裡插入圖片描述

相關文章