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'>
- <!-- 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>
下面是截图:
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持脚本之家。