Advertisement
Not a member of Pastebin yet?
Sign Up,
it unlocks many cool features!
- 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);
- // }
- ```
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement