一個(gè)旋轉(zhuǎn)的CSS3 transform-style3D效果

2024-09-05 12:17:16

字體：大中小

供稿：網(wǎng)友

一個(gè)旋轉(zhuǎn)的CSS3 3D效果展示，讓一個(gè)層作旋轉(zhuǎn)運(yùn)動(dòng)，看上去有3D效果，實(shí)現(xiàn)代碼精簡(jiǎn)過了，看上去不算復(fù)雜，有助于CSS3學(xué)者參考。

<!DOCTYPE html><html><head>  <meta charset="utf-8">  <title>transform-style的3D效果測(cè)試</title><style>*{font-size: 14px;color: #fff; padding:0; margin:0;}#container {	position: relative;	height: 300px;	width: 300px;	-webkit-perspective: 500;	margin-top: 200px;	margin-right: auto;	margin-left: auto;}#parent {	margin: 10px;	width: 280px;	height: 280px;	background-color: #666;	opacity: 0.8;	-webkit-transform-style: preserve-3d;	-webkit-animation: spin 5s infinite linear;}#parent > div {	position: absolute;	top: 40px;	left: 40px;	width: 280px;	height: 200px;	padding: 10px;	-webkit-box-sizing: border-box;}#parent > :first-child {	background-color: #000;	-webkit-transform: translateZ(-100px) rotateY(45deg);}#parent > :last-child {	background-color: #333;	-webkit-transform: translateZ(50px) rotateX(20deg);	-webkit-transform-origin: 50% top;}	/*執(zhí)行Y軸旋轉(zhuǎn)360度動(dòng)畫*/@-webkit-keyframes spin {	from {-webkit-transform: rotateY(0);}	to {-webkit-transform: rotateY(360deg);}}</style></head>  <body>  <div   class="iwvjtn8m0"   id="container">    <div   class="iwvjtn8m0"   id="parent">      <div>武林網(wǎng)提供編程源碼、網(wǎng)站源碼、網(wǎng)頁素材、書籍教程、網(wǎng)站模板、網(wǎng)頁特效代碼等，做有質(zhì)量的學(xué)習(xí)型源碼下載站。</div>    </div>  </div></body></html>

上一篇：CSS3制作分步注冊(cè)表單

下一篇：CSS3幻燈片-3d荷葉窗圖片切換