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

ttx9n · 发表于 2016-7-1 16:03:05

这篇文章主要为大家详细介绍了CSS3制作酷炫的三维相册效果的具体代码，具有一定的参考价值，感兴趣的小伙伴们可以参考一下

特炫的三维相册分享出来，希望大家喜欢！

XML/HTML Code复制内容到剪贴板

<!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>
<div class='product'>
<div 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>
</div>
<div 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>
</div>
</div>
</body>
</html>

下面是截图：

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持脚本之家。

z80vh · 发表于 2022-11-9 15:07:55

很不错的源码论坛

dm00ji1s · 发表于 2022-11-20 00:41:47

抽根烟，下来看看再说

123456 · 发表于 2023-11-28 19:10:28

很不错的玩意

81708585 · 发表于 2024-3-6 06:27:14

搞个免费的用用

95nd4ba · 发表于 2024-6-23 08:17:20

人都不在了啊啊

j__j33p · 发表于 2024-8-28 13:37:39

大家都不容易！

3pjdk29w · 发表于 2024-9-5 14:10:05

刷刷刷刷刷刷刷刷刷刷刷刷刷刷刷

账号		自动登录	找回密码
密码			立即注册

[CSS] CSS3制作酷炫的三维相册效果

相关帖子