CSS3三维相册

听完大宝老师的课程,真心很赞!
经过一点修改,现在就把这个特炫的三维相册分享出来,希望大家喜欢!

<!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'>
    <!-- scene类是为了修饰两个div的相同点 -->
    <!-- s1和s2是为了显示两个div的不同,一个左浮动,一个右浮动 -->
        <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>

下面是截图:
CSS3三维相册_第1张图片

你可能感兴趣的:(css3,相册,三维,三维相册,CSS3三维相册)