CSS3制作酷炫的三維相冊效果示例

來源：懂視網責編：小采時間：2020-11-27 18:52:51

CSS3制作酷炫的三維相冊效果示例

CSS3制作酷炫的三維相冊效果示例:特炫的三維相冊分享出來，希望大家喜歡！<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <

推薦度：

點擊下載本文 文檔為doc格式

導讀CSS3制作酷炫的三維相冊效果示例:特炫的三維相冊分享出來，希望大家喜歡！<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <

特炫的三維相冊分享出來，希望大家喜歡！

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>三維動畫</title>
<style type="text/css">
* { 
 padding : 0px; 
 margin: 0px; 
} 
body { 
 background: url(images/758.jpg) no-repeat top center; 
} 
.product { 
 height: 400px; 
 position: fixed; 
 top: 20%; 
 right: 20%; 
 /*視距*/ 
 perspective : 500px; 
} 
.scene { 
 height: 250px; 
 width: 250px; 
 transform-style: preserve-3d; 
 transform-origin: 50%; 
 margin: 100px; 
 /*定義一個名為slide的動畫*/ 
 animation: slide 12s linear infinite; 
} 

.scene ul li { 
 width: 230px; 
 height: 230px; 
 list-style: none; 
 border: 5px solid rgba(255, 255, 255, 0.5); 
 position: absolute; 
} 

@keyframes slide{ 
 from{ 
 transform: rotateY(0deg); 
 } 

 to{ 
 transform: rotateY(360deg); 
 } 
} 
.s1 { 
 float: left; 
} 
.s1 ul li:nth-child(1) { 
 transform: rotateY(0deg) translateZ(118px); 
} 
.s1 ul li:nth-child(2) { 
 transform: rotateY(90deg) translateZ(118px); 
} 
.s1 ul li:nth-child(3) { 
 transform: rotateY(180deg) translateZ(118px); 
} 
.s1 ul li:nth-child(4) { 
 transform: rotateY(-90deg) translateZ(118px); 
} 
.s2 { 
 float: right; 
} 
.s2 ul li:nth-child(1) { 
 transform: rotateY(0deg) translateZ(200px); 
} 
.s2 ul li:nth-child(2) { 
 transform: rotateY(90deg) translateZ(200px); 
} 
.s2 ul li:nth-child(3) { 
 transform: rotateY(180deg) translateZ(200px); 
} 
.s2 ul li:nth-child(4) { 
 transform: rotateY(-90deg) translateZ(200px); 
} 
</style>
</head>
<body>
 <p class='product'>
 <!-- scene類是為了修飾兩個p的相同點 -->
 <!-- s1和s2是為了顯示兩個p的不同，一個左浮動，一個右浮動 -->
 <p class='scene s1'>
 <ul>
 <li><img src="images/1.jpg"/></li>
 <li><img src="images/2.jpg"/></li>
 <li><img src="images/3.jpg"/></li>
 <li><img src="images/4.jpg"/></li>
 </ul>
 </p>
 <p class='scene s2'>
 <ul>
 <li><img src="images/1.jpg"/></li>
 <li><img src="images/2.jpg"/></li>
 <li><img src="images/3.jpg"/></li>
 <li><img src="images/4.jpg"/></li>
 </ul>
 </p>
 </p>
</body>
</html>

下面是截圖：

CSS3制作酷炫的三維相冊效果示例