Animace kostky pomocí CSS3

Zpět
Stylovaní v CSS
/*

  Kostka

*/

.shape-container {
  margin-top: 50px;
  width: 8em;
  height: 8em;
  position: relative;
  -webkit-perspective: 500px;
  -moz-perspective: 500px;
  -ms-perspective: 500px;
  perspective: 500px;
  -webkit-transform-origin: 50% 50%;
  -moz-transform-origin: 50% 50%;
  -o-transform-origin: 50% 50%;
  -ms-transform-origin: 50% 50%;
  transform-origin: 50% 50%;
  display: inline-block;
  -webkit-transform: translate3d(0, 0, 0, 0);
  -moz-transform: translate3d(0, 0, 0, 0);
  -o-transform: translate3d(0, 0, 0, 0);
  -ms-transform: translate3d(0, 0, 0, 0);
  transform: translate3d(0, 0, 0, 0);
}
.shape-cube {
  -webkit-transform-style: preserve-3d;
  -moz-transform-style: preserve-3d;
  -o-transform-style: preserve-3d;
  -ms-transform-style: preserve-3d;
  transform-style: preserve-3d;
  width: 100%;
  height: 100%;
}

.shape-kostka__strana {
  position: absolute;
  width: 8em;
  height: 8em;
  background-color: #aa3d55;
}
.shape-kostka__strana--predek {
  -webkit-transform: rotateY(0deg) translateZ(4em);
  -moz-transform: rotateY(0deg) translateZ(4em);
  -o-transform: rotateY(0deg) translateZ(4em);
  -ms-transform: rotateY(0deg) translateZ(4em);
  transform: rotateY(0deg) translateZ(4em);
  background-color: #aa3d55;
}
.shape-kostka__strana--zadek {
  -webkit-transform: rotateX(180deg) translateZ(4em);
  -moz-transform: rotateX(180deg) translateZ(4em);
  -o-transform: rotateX(180deg) translateZ(4em);
  -ms-transform: rotateX(180deg) translateZ(4em);
  transform: rotateX(180deg) translateZ(4em);
  background-color: #aa3d55;
}
.shape-kostka__strana--top {
  -webkit-transform: rotateX(90deg) translateZ(4em);
  -moz-transform: rotateX(90deg) translateZ(4em);
  -o-transform: rotateX(90deg) translateZ(4em);
  -ms-transform: rotateX(90deg) translateZ(4em);
  transform: rotateX(90deg) translateZ(4em);
  background-color: #c94663;
}
.shape-kostka__strana--bottom {
  -webkit-transform: rotateX(-90deg) translateZ(4em);
  -moz-transform: rotateX(-90deg) translateZ(4em);
  -o-transform: rotateX(-90deg) translateZ(4em);
  -ms-transform: rotateX(-90deg) translateZ(4em);
  transform: rotateX(-90deg) translateZ(4em);
  background-color: #c94663;
}
.shape-kostka__strana--left {
  -webkit-transform: rotateY(-90deg) translateZ(4em);
  -moz-transform: rotateY(-90deg) translateZ(4em);
  -o-transform: rotateY(-90deg) translateZ(4em);
  -ms-transform: rotateY(-90deg) translateZ(4em);
  transform: rotateY(-90deg) translateZ(4em);
  background-color: #e85373;
}
.shape-kostka__strana--right {
  -webkit-transform: rotateY(90deg) translateZ(4em);
  -moz-transform: rotateY(90deg) translateZ(4em);
  -o-transform: rotateY(90deg) translateZ(4em);
  -ms-transform: rotateY(90deg) translateZ(4em);
  transform: rotateY(90deg) translateZ(4em);
  background-color: #e85373;
}
.animate--spin {
  -webkit-animation-name: angle-spin;
  -moz-animation-name: angle-spin;
  -o-animation-name: angle-spin;
  -ms-animation-name: angle-spin;
  animation-name: angle-spin;
  -webkit-animation-duration: 10s;
  -moz-animation-duration: 10s;
  -o-animation-duration: 10s;
  -ms-animation-duration: 10s;
  animation-duration: 10s;
  -webkit-animation-timing-function: linear;
  -moz-animation-timing-function: linear;
  -o-animation-timing-function: linear;
  -ms-animation-timing-function: linear;
  animation-timing-function: linear;
  -webkit-animation-iteration-count: infinite;
  -moz-animation-iteration-count: infinite;
  -o-animation-iteration-count: infinite;
  -ms-animation-iteration-count: infinite;
  animation-iteration-count: infinite;
}
@-moz-keyframes angle-spin {
  0% {
    -webkit-transform: rotateZ(-50deg) rotateX(50deg) rotateY(-20deg);
    -moz-transform: rotateZ(-50deg) rotateX(50deg) rotateY(-20deg);
    -o-transform: rotateZ(-50deg) rotateX(50deg) rotateY(-20deg);
    -ms-transform: rotateZ(-50deg) rotateX(50deg) rotateY(-20deg);
    transform: rotateZ(-50deg) rotateX(50deg) rotateY(-20deg);
  }
  100% {
    -webkit-transform: rotateZ(310deg) rotateX(-310deg) rotateY(340deg);
    -moz-transform: rotateZ(310deg) rotateX(-310deg) rotateY(340deg);
    -o-transform: rotateZ(310deg) rotateX(-310deg) rotateY(340deg);
    -ms-transform: rotateZ(310deg) rotateX(-310deg) rotateY(340deg);
    transform: rotateZ(310deg) rotateX(-310deg) rotateY(340deg);
  }
}
@-webkit-keyframes angle-spin {
  0% {
    -webkit-transform: rotateZ(-50deg) rotateX(50deg) rotateY(-20deg);
    -moz-transform: rotateZ(-50deg) rotateX(50deg) rotateY(-20deg);
    -o-transform: rotateZ(-50deg) rotateX(50deg) rotateY(-20deg);
    -ms-transform: rotateZ(-50deg) rotateX(50deg) rotateY(-20deg);
    transform: rotateZ(-50deg) rotateX(50deg) rotateY(-20deg);
  }
  100% {
    -webkit-transform: rotateZ(310deg) rotateX(-310deg) rotateY(340deg);
    -moz-transform: rotateZ(310deg) rotateX(-310deg) rotateY(340deg);
    -o-transform: rotateZ(310deg) rotateX(-310deg) rotateY(340deg);
    -ms-transform: rotateZ(310deg) rotateX(-310deg) rotateY(340deg);
    transform: rotateZ(310deg) rotateX(-310deg) rotateY(340deg);
  }
}
@-o-keyframes angle-spin {
  0% {
    -webkit-transform: rotateZ(-50deg) rotateX(50deg) rotateY(-20deg);
    -moz-transform: rotateZ(-50deg) rotateX(50deg) rotateY(-20deg);
    -o-transform: rotateZ(-50deg) rotateX(50deg) rotateY(-20deg);
    -ms-transform: rotateZ(-50deg) rotateX(50deg) rotateY(-20deg);
    transform: rotateZ(-50deg) rotateX(50deg) rotateY(-20deg);
  }
  100% {
    -webkit-transform: rotateZ(310deg) rotateX(-310deg) rotateY(340deg);
    -moz-transform: rotateZ(310deg) rotateX(-310deg) rotateY(340deg);
    -o-transform: rotateZ(310deg) rotateX(-310deg) rotateY(340deg);
    -ms-transform: rotateZ(310deg) rotateX(-310deg) rotateY(340deg);
    transform: rotateZ(310deg) rotateX(-310deg) rotateY(340deg);
  }
}
@keyframes angle-spin {
  0% {
    -webkit-transform: rotateZ(-50deg) rotateX(50deg) rotateY(-20deg);
    -moz-transform: rotateZ(-50deg) rotateX(50deg) rotateY(-20deg);
    -o-transform: rotateZ(-50deg) rotateX(50deg) rotateY(-20deg);
    -ms-transform: rotateZ(-50deg) rotateX(50deg) rotateY(-20deg);
    transform: rotateZ(-50deg) rotateX(50deg) rotateY(-20deg);
  }
  100% {
    -webkit-transform: rotateZ(310deg) rotateX(-310deg) rotateY(340deg);
    -moz-transform: rotateZ(310deg) rotateX(-310deg) rotateY(340deg);
    -o-transform: rotateZ(310deg) rotateX(-310deg) rotateY(340deg);
    -ms-transform: rotateZ(310deg) rotateX(-310deg) rotateY(340deg);
    transform: rotateZ(310deg) rotateX(-310deg) rotateY(340deg);
  }
}
Stylovaní pomocí preprocesoru Stylus
$cube--color = #aa3d55
$cube--width = 8em

.shape-container
  width $cube--width
  height $cube--width
  position relative
  perspective 500px
  transform-origin 50% 50%
  display inline-block
  transform translate3d(0,0,0,0)

.shape-kostka
  transform-style preserve-3d
  width 100%
  height 100%

  &__strana
    position absolute
    width $cube--width
    height $cube--width
    background-color darken($cube--color, 10%)

    &--predek
      transform rotateY(0deg) translateZ($cube--width * 0.5)
      background-color darken($cube--color, 10%)
    &--zadek
      transform rotateX(180deg) translateZ($cube--width * 0.5)
      background-color darken($cube--color, 10%)
    &--top
      transform rotateX(90deg) translateZ($cube--width * 0.5)
      background-color darken($cube--color, 40%)
    &--bottom
      transform rotateX(-90deg) translateZ($cube--width * 0.5)
      background-color darken($cube--color, 40%)
    &--left
      transform rotateY(-90deg) translateZ($cube--width * 0.5)
      background-color darken($cube--color, 25%)
    &--right
      transform rotateY(90deg) translateZ($cube--width * 0.5)
      background-color darken($cube--color, 25%)


.animate--spin
  animation-name angle-spin
  animation-duration 10s
  animation-timing-function linear
  animation-iteration-count infinite

@keyframes angle-spin
  0%
    transform rotateZ(-50deg) rotateX(50deg) rotateY(-20deg)
  100%
    transform rotateZ(310deg) rotateX(-310deg) rotateY(340deg)