CSS3制作酷炫的三维相册效果
特炫的三维相册分享出来，希望大家喜欢！
XML/HTML Code复制内容到剪贴板- >
- <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>
下面是截图：
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持潘少俊衡。
版权声明
本文仅代表作者观点，不代表本站立场。
本文系作者授权发表，未经许可，不得转载。
本文地址：/web/CSS/77862.html
