css3之旋轉太極圖

旋轉太極圖

太極圖可由6個部分組成：

將圖片的位置放在合適的位置就能組成一張太極圖。

首先在div容器內畫上以上的6圖案：

<div id="box">
			<ul id="vessel">
				<li></li>
				<li></li>
				<li></li>
				<li></li>
				<li></li>
				<li></li>
			</ul>
		</div>

#box{
				width: 300px;
				height: 300px;
				border: 10px red hidden;
				margin-left: 100px;
				margin-top: 50px;
				position: relative;
			}
			#box #vessel{
				width: 300px;
				height: 300px;
				list-style: none;
				margin-left: 50px;
				margin-top: 50px;
				position: relative;
			}
			#box #vessel li:nth-of-type(1){
				width: 200px;
				height: 200px;
				background-color: black;
				border-radius: 50%;
				position: absolute;
			}
			#box #vessel li:nth-of-type(2){
				width: 100px;
				height: 200px;
				background-color: white;
				border-radius: 0 100px 100px 0;
				position: absolute;
				right: 100px;
			}
			#box #vessel li:nth-of-type(3){
				width: 100px;
				height: 100px;
				background-color: black;
				border-radius: 50%;
				position: absolute;
				left: 50px;
			}
			#box #vessel li:nth-of-type(4){
				width: 100px;
				height: 100px;
				background-color: white;
				border-radius: 50%;
				position: absolute;
				left: 50px;
				top: 100px;
			}
			#box #vessel li:nth-of-type(5){
				width: 50px;
				height: 50px;
				background-color: white;
				border-radius: 50%;
				position: absolute;
				left: 75px;
				top: 25px;
			}
			#box #vessel li:nth-of-type(6){
				width: 50px;
				height: 50px;
				background-color: black;
				border-radius: 50%;
				position: absolute;
				left: 75px;
				top: 125px;
			}

完成後就能組成

接下來讓圖片旋轉就好了

建立動畫

@keyframes Rotate{
                from{transform: rotate(0deg);}
                to{transform: rotate(360deg);}
}

讓整個DIV饒中心旋轉就OK啦 在#box樣式內加

animation: Rotate 2s infinite linear;
 transform-origin: 150px 100px;

搞定.