tanie strony www bydgoszcz tanie strony www bydgoszcz tanie strony www bydgoszcz
Tanie Strony Internetowe Bydgoszcz » Firmowe Strony WWW Bydgoszcz
www.at.bydgoszcz.pl
3D CSS3 - Czy Adobe Flash odejdzie na zawsze?

3D CSS3 - Czy Adobe Flash odejdzie na zawsze?

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:

css html
css html
css html

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 
Copyright © 2017-2019 www.at.bydgoszcz.pl

Tanie Strony Internetowe Bydgoszcz » Firmowe Strony WWW Bydgoszcz

Strony Internetowe    Pytania i odpowiedzi    Szablony tanich stron    Zamów stronę WWW
projekty stron strony internetowe bydgoszcz
g+