CSS3之旋轉立方體

時間 2019-11-12

標籤 css3 css 旋轉立方體欄目 CSS 简体版

原文原文鏈接

旋轉立方體css

第一步：正方體6個面，因此咱們須要有6個正方形。html

第二步：6個正方形讓它們5個先拼接成這樣動畫

第三步：對第2 3 4 5 個正方形進行旋轉，沿着與第1個正方形重合的邊的軸旋轉3d

第四步：將第6個正方形與第一個正方形重合，後沿着正方形中心點旋轉180deg，再向Z軸往內平移正方形邊長的距離，正方體就構造好了code

第五步：建立一個動畫@keyframes ，動畫過程是沿着Y軸旋轉360deg，這樣旋轉是沿着第一張圖片所在的平面（Z=0）X=上下邊中心的軸旋轉orm

@keyframes move{
from{transform: rotateY(0deg);}
to{transform: rotateY(360deg);}
}htm

第六步：因此要將旋轉的中心軸往Z周內移動，這樣旋轉立方體就實現了。（transform-origin: center center -150px; ）blog

下面是具體代碼：圖片

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			*{
				margin: 0;
				padding: 0;
			}
			#box{
				width: 400px;
				height: 400px;
				border:  1px #FF0000 solid;
				margin: 30px 20%;
				perspective: 500px;
			}
			#box ul{
				width: 300px;
				height: 300px;
				border:  1px #FF0000 solid;
				margin: 50px;
				position: relative;
				transform-style: preserve-3d;
				animation: move 3s infinite linear;
				transform-origin: center center -150px;  
			}
			#box ul li{
				width: 300px;
				height: 300px;
				list-style: none;
				font-size: 50px;
				line-height: 300px;
				text-align: center;
				position: absolute;
			}
			#box ul li:nth-of-type(1){background-color: #FF0000;opacity: 0.4;}
			#box ul li:nth-of-type(2){background-color: yellow;opacity: 0.4;transform: translateX(300px) rotateY(90deg);transform-origin: left;}
			#box ul li:nth-of-type(3){background-color: blue;opacity: 0.4;transform: translateX(-300px) rotateY(-90deg);transform-origin: right;}
			#box ul li:nth-of-type(4){background-color: green;opacity: 0.4;transform: translateY(-300px) rotateX(90deg);transform-origin: bottom; }
			#box ul li:nth-of-type(5){background-color: orange;opacity: 0.4;transform: translateY(300px) rotateX(-90deg);transform-origin: top;}
			#box ul li:nth-of-type(6){background-color: purple;opacity: 0.4;transform: translateZ(-300px) rotateY(180deg);}
			@keyframes move{
				from{transform: rotateY(0deg);}
				to{transform: rotateY(360deg);}
			}
		</style>
	</head>
	<body>
		<div id="box">
			<ul>
				<li>1</li>
				<li>2</li>
				<li>3</li>
				<li>4</li>
				<li>5</li>
				<li>6</li>
			</ul>
		</div>
	</body>
</html>

使用到的知識點：utf-8

transform：

translate 平移 ;

translateX()在X軸方向上平移；translateY()在Y軸方向上平移。

rotate：旋轉；

rotateX（）沿X軸旋轉；rotateY()沿Y軸旋轉。

transform-origin：改變元素的位置。第三個參數是 Z軸位置

perspective ：透視圖

transform-style：設置動畫的模式 2D OR 3D