CSS3制作酷炫的三维相册效果
程序员文章站
2023-11-22 21:03:28
这篇文章主要为大家详细介绍了CSS3制作酷炫的三维相册效果的具体代码,具有一定的参考价值,感兴趣的小伙伴们可以参考一下... 16-07-01...
特炫的三维相册分享出来,希望大家喜欢!
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>
下面是截图:
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持。