HTML
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 |
<!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" xml:lang="ru" lang="ru"> <head> <link href="/stylesheets/styles.css" type="text/css" rel="stylesheet" /> <script type="text/javascript" src="/javascripts/jquery-1.10.2.min.js"></script> <script type="text/javascript" src="http://cdnjs.cloudflare.com/ajax/libs/prefixfree/1.0.7/prefixfree.min.js"></script> <link href="/stylesheets/smoothDivScroll.css" type="text/css" rel="stylesheet" /> </head> <body> <div id="holder"> <div class="box"> <div class="side1"><img src="http://4.bp.blogspot.com/-S2btlKknLJw/T0a8Nb2m-II/AAAAAAAACv8/j3ZpxP0qSak/s400/pes.jpg" alt="пёс"></div> <div class="side2"><img src="http://4.bp.blogspot.com/-uXTQrdgmR5A/TVOtm4AfAzI/AAAAAAAABcA/ZPY0DjhgY0o/s1600/mechty.jpg" alt="мечты"></div> <div class="side3"><img src="http://4.bp.blogspot.com/_ebKrCj8TLPk/TPYM-CEBZgI/AAAAAAAABEA/foVrNnZ60N0/s400/mechekluv.jpg" alt="мечеклюв"></div> <div class="side4"><img src="http://4.bp.blogspot.com/-JT5diAXNGw4/TaQPTlnr2oI/AAAAAAAABto/jqJRCIzwQOo/s400/kon.jpg" alt="конь"></div> <div class="side5"><img src="http://2.bp.blogspot.com/-NEvSypEsQv0/TZQ1tka_UwI/AAAAAAAABqo/qjYR-YSjjws/s400/mishki.jpg" alt="мишки"></div> <div class="side6"><img src="http://2.bp.blogspot.com/_ebKrCj8TLPk/TLIyv4GfDvI/AAAAAAAAAss/l9A_0m-Gyq8/s1600/tigr.jpg" alt="тигры"></div> </div> </div> </html> |
CSS
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 |
#holder { margin:150px auto; -webkit-perspective:600px; -moz-perspective:600px; text-indent: 0px; } .box { position: relative; margin: 0 auto; height: 200px; width: 200px; -webkit-animation: spin 20s infinite linear; -moz-animation: spin 20s infinite linear; -webkit-transform-style: preserve-3d; -moz-transform-style: preserve-3d; } .box div { position: absolute; height: 200px; width: 200px; box-shadow: 0px 0px 1px rgba(0, 0, 0, 0.5); -webkit-animation:rotate 15s infinite linear; -moz-animation:rotate 15s infinite linear; } .box div img {width:200px; height:200px; border-radius:200px; -webkit-animation:rot 10s infinite linear; -moz-animation:rot 10s infinite linear; padding: 0; } .box div.side1 { background:rgba( 213, 62, 7, 0.8); -webkit-transform:translateZ(100px); -moz-transform:translateZ(100px); } .box div.side2 { background:rgba( 127, 255, 212, 0.8); -webkit-transform:rotateY(90deg) translateZ(100px); -moz-transform:rotateY(90deg) translateZ(100px); } .box div.side3 { background:rgba( 255, 219, 88, 0.8); -webkit-transform:rotateY(180deg) translateZ(100px); -moz-transform:rotateY(180deg) translateZ(100px); } .box div.side4 { background:rgba( 153, 17, 153, 0.8); -webkit-transform:rotateY(-90deg) translateZ(100px); -moz-transform:rotateY(-90deg) translateZ(100px); } .box div.side5 { background:rgba( 0, 71, 171, 0.8); -webkit-transform:rotateX(-90deg) translateZ(100px) rotate(180deg); -moz-transform:rotateX(-90deg) translateZ(100px) rotate(180deg); } .box div.side6 { background:rgba( 0, 171, 147, 0.8); -webkit-transform:rotateX(90deg) translateZ(100px); -moz-transform:rotateX(90deg) translateZ(100px); } @-moz-keyframes spin { 0% {-moz-transform: rotateX(0deg) rotateY(0deg);} 100% {-moz-transform: rotateX(1080deg) rotateY(360deg);} } @-webkit-keyframes spin { 0% {-webkit-transform: rotateX(0deg) rotateY(0deg);} 100% {-webkit-transform: rotateX(1080deg) rotateY(360deg);} } @-moz-keyframes rot { 0% {-moz-transform: rotate(0deg);} 100% {-moz-transform: rotate(360deg);} } @-webkit-keyframes rot { 0% {-webkit-transform: rotate(0deg);} 100% {-webkit-transform: rotate(360deg);} } |
Link to this post!
Как сделать , чтоб во всех браузерах работало ?
Добавить более позднюю библиотеку ?
Сергей, для каких именно браузеров вам нужно обеспечить совместимость?