3D cube.markdown

3d cube.markdown

view:

h3 Мои Альбомы
br
.col-xs-6.col-md-3.cubes_list-cube id=dom_id(cubes_test.first)
  #cube_container
    - cubes_test.each do |cube|
      #cube.animate
        - if cube.cover.present? && cube.cover.cover_image.present?
          - ([cube.cover.cover_image] * 6).each_with_index do |image, index|
            .cover_image class='#{CoverImage::CUBE_LISTS[index]}' style="background-image: url('#{image.photo.url(:thumb)}');"

css

@-moz-keyframes spinningH {
  from {
    -moz-transform: rotateY(0deg);
  }
  to{
    -moz-transform: rotateY(360deg);
  }
}

@-webkit-keyframes spinningH {
  from {
    -webkit-transform:  rotateY(0deg);
  }
  to{
    -webkit-transform: rotateY(360deg);
  }
}

@-o-keyframes spinningH {
  from {
    -o-transform: rotateY(0deg);
  }
  to{
    -o-transform: rotateY(360deg);
  }
}

@-ms-keyframes spinningH {
  from {
    -ms-transform: rotateY(0deg);
  }
  to{
    -ms-transform: rotateY(360deg);
  }
}

@keyframes spinningH {
  from {
    transform: rotateY(0deg);
  }
  to{
    transform: rotateY(360deg);
  }
}

#cube_container {
  -webkit-perspective : 800px;
  -moz-perspective    : 800px;
  -o-perspective      : 800px;
  -ms-perspective     : 800px;
  perspective         : 800px;

  -webkit-perspective-origin  : 50% 100px;
  -moz-perspective-origin     : 50% 100px;
  -moz-transform-origin       : 50% 100px;
  -o-perspective-origin       : 50% 100px;
  -ms-perspective-origin      : 50% 100px;
  perspective-origin          : 50% 100px;
  overflow: hidden;
  margin-top: 70px;
  height: 170px;
  width: 250px;
  * {
    box-sizing: unset;
  }
}

.cube_3d {
  -webkit-perspective : 800px;
  -moz-perspective    : 800px;
  -o-perspective      : 800px;
  -ms-perspective     : 800px;
  perspective         : 800px;

  -webkit-perspective-origin  : 50% 100px;
  -moz-perspective-origin     : 50% 100px;
  -moz-transform-origin       : 50% 100px;
  -o-perspective-origin       : 50% 100px;
  -ms-perspective-origin      : 50% 100px;
  perspective-origin          : 50% 100px;
  overflow: hidden;
  height: 170px;
  width: 250px;
  * {
    box-sizing: unset;
  }
}

.animate:hover {
  -webkit-animation : spinningH 6s infinite linear;
  -moz-animation    : spinningH 6s infinite linear;
  -o-animation      : spinningH 6s infinite linear;
  -ms-animation     : spinningH 6s infinite linear;
  animation         : spinningH 6s infinite linear;
}

#cube {
  position: relative;
  width: 120px;

  -webkit-transform-style : preserve-3d;
  -moz-transform-style    : preserve-3d;
  -o-transform-style      : preserve-3d;
  -ms-transform-style     : preserve-3d;
  transform-style         : preserve-3d;
  margin-top: 30px;
  margin-left: 62.5px;

  .cover_image {
    position: absolute;
    height: 60px;
    width: 60px;
    padding: 30px;
    // opacity: 0.9;
    background-position:center center;

    &:nth-child(1) {
      -webkit-transform : translateZ(60px);
      -moz-transform    : translateZ(60px);
      -o-transform      : translateZ(60px);
      -ms-transform     : translateZ(60px);
      transform         : translateZ(60px);
      background-repeat : no-repeat;
    }

    &:nth-child(2) {
      -webkit-transform : rotateY(90deg) translateZ(60px);
      -moz-transform    : rotateY(90deg) translateZ(60px);
      -o-transform      : rotateY(90deg) translateZ(60px);
      -ms-transform     : rotateY(90deg) translateZ(60px);
      transform         : rotateY(90deg) translateZ(60px);
      background-repeat : no-repeat;
    }

    &:nth-child(3) {
      -webkit-transform : rotateY(180deg) translateZ(60px);
      -moz-transform    : rotateY(180deg) translateZ(60px);
      -o-transform      : rotateY(180deg) translateZ(60px);
      -ms-transform     : rotateY(180deg) translateZ(60px);
      transform         : rotateY(180deg) translateZ(60px);
      background-repeat : no-repeat;
    }

    &:nth-child(4) {
      -webkit-transform : rotateY(-90deg) translateZ(60px);
      -moz-transform    : rotateY(-90deg) translateZ(60px);
      -o-transform      : rotateY(-90deg) translateZ(60px);
      -ms-transform     : rotateY(-90deg) translateZ(60px);
      transform         : rotateY(-90deg) translateZ(60px);
      background-repeat : no-repeat;
    }

    &:nth-child(5) {
      -webkit-transform : rotateX(-90deg) translateZ(60px) rotate(180deg);
      -moz-transform    : rotateX(-90deg) translateZ(60px) rotate(180deg);
      -o-transform      : rotateX(-90deg) translateZ(60px) rotate(180deg);
      -ms-transform     : rotateX(-90deg) translateZ(60px) rotate(180deg);
      transform         : rotateX(-90deg) translateZ(60px) rotate(180deg);
      background-repeat :no-repeat;
    }

    &:nth-child(6)  {
      -webkit-transform : rotateX(90deg) translateZ(60px);
      -moz-transform    : rotateX(90deg) translateZ(60px);
      -o-transform      : rotateX(90deg) translateZ(60px);
      -ms-transform     : rotateX(90deg) translateZ(60px);
      transform         : rotateX(90deg) translateZ(60px);
      background-repeat :no-repeat;
      text-align:center;
    }
  }
}

// .back {
//     transform: translateZ(-60px) rotateY(180deg);
// }
// .right {
//     transform: rotateY(-270deg) translateX(60px);
//     transform-origin: right top 0;
// }
// .left {
//     transform: rotateY(270deg) translateX(-60px);
//     transform-origin: left center 0;
// }
// .top {
//     transform: rotateX(-90deg) translateY(-60px);
//     transform-origin: center top 0;
// }
// .bottom {
//     transform: rotateX(90deg) translateY(60px);
//     transform-origin: center bottom 0;
// }
// .front {
//     transform: translateZ(60px);
// }