Wstawki z animacjami wykonanymi we Flashu? Całe strony we flashu?
Nie dziękuję...
Nawet kosztem wykonania "uboższej" animacji proponuję zastosowanie technik w CSS3, poniżej próbka możliwości animacji 3D z zastosowaniem jedynie kilku linijek styli CSS3:
Kod CSS3
.perspective { -webkit-perspective: 800px; perspective: 800px; } .cube { display: block; width: 200px; height: 200px; margin: 40px; float: left; background: rgba(0,0,0, 0.1); -webkit-transform-style: preserve-3d; -moz-transform-style: preserve-3d; -o-transform-style: preserve-3d; -ms-transform-style: preserve-3d; transform-style: preserve-3d; -webkit-transform: rotateX(0) rotateY(0) rotateZ(0); -moz-transform: rotateX(0) rotateY(0) rotateZ(0); -ms-transform: rotateX(0) rotateY(0) rotateZ(0); -o-transform: rotateX(0) rotateY(0) rotateZ(0); transform: rotateX(0) rotateY(0) rotateZ(0); } #front { width: 200px; height: 200px; position: absolute; -webkit-backface-visibility: visible; -webkit-transform: translateZ(100px); backface-visibility: visible; transform: translateZ(100px); } #back { width: 200px; height: 200px; position: absolute; -webkit-backface-visibility: visible; -webkit-transform: rotateY(180deg) translateZ(100px); backface-visibility: visible; transform: rotateY(180deg) translateZ(100px); } #cubeY { -webkit-animation: rotatecubeY 5s infinite linear; animation: rotatecubeY 5s infinite linear; } @-webkit-keyframes rotatecubeY { 0% { -webkit-transform: rotateY(0); } 100% { -webkit-transform: rotateY(360deg); } } @keyframes rotatecubeY { 0% { transform: rotateY(0); } 100% { transform: rotateY(360deg); } } #cubeX { -webkit-animation: rotatecubeX 5s infinite linear; animation: rotatecubeX 5s infinite linear; } @-webkit-keyframes rotatecubeX { 0% { -webkit-transform: rotateX(0); } 100% { -webkit-transform: rotateX(360deg); } } @keyframes rotatecubeX { 0% { transform: rotateX(0); } 100% { transform: rotateX(360deg); } } #cubeZ { -webkit-animation: rotatecubeZ 5s infinite linear; animation: rotatecubeZ 5s infinite linear; } @-webkit-keyframes rotatecubeZ { 0% { -webkit-transform: rotateZ(0); } 100% { -webkit-transform: rotateZ(360deg); } } @keyframes rotatecubeZ { 0% { transform: rotateZ(0); } 100% { transform: rotateZ(360deg); } }
Kod HTML
<div class="perspective"> <div class="cube" id="cubeY"> <img src="css3.png" id="front" alt="css" /> <img src="html5.png" id="back" alt="html" /> </div> </div> <div class="perspective"> <div class="cube" id="cubeX"> <img src="css3.png" id="front" alt="css" /> <img src="html5.png" id="back" alt="html" /> </div> </div> <div class="perspective"> <div class="cube" id="cubeZ"> <img src="css3.png" id="front" alt="css" /> <img src="html5.png" id="back" alt="html" /> </div> </div>
↻ do góry « powrót