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制作酷炫的三维相册效果示例

推荐度：

点击下载本文 文档为doc格式

标签：相册制作酷炫

热门焦点

CSS3制作酷炫的三维相册效果示例

CSS3制作酷炫的三维相册效果示例

CSS3制作酷炫的三维相册效果示例

最新推荐

猜你喜欢

热门推荐