Вращающийся куб на css

Доброе время суток, есть вопрос, который я сама не смогла реализовать, хотя css на базовом уровне знаю, но видимо знаний не хватает.

Есть вращающийся куб по горизонтали и вертикали, так вот по горизонтали в данный момент он все время вращается влево, согласно задумке, а вот как сделать чтобы он вращался вправо пока никак догадаться не могу, т.е куб вращается по вертикали и влево, нужно чтобы также по вертикали вращался, но по горизонтали вправо.

https://jsfiddle.net/k5cja4Lx/

Спойлер: код

Код html:

Код (HTML5):

1. <div class="cube">
2.     <div class="cubespinner>
3.         <div class="face"><img src="" width="" height="" /></div>
4.         <div class="face"><img src="" width="" height="" /></div>
5.         <div class="face"><img src="" width="" height="" /></div>
6.         <div class="face"><img src="" width="" height="" /></div>
7.         <div class="face"><img src="" width="" height="" /></div>
8.         <div class="face"><img src="" width="" height="" /></div>
9.     </div>
10. </div>

Код css:

Код (CSS):

1. <style>
2. .cube {margin: 0 auto; position: relative; width: 800px;}
3.  
4. .cubespinner  {
5.     animation: spincube 10s infinite;
6.     transform-style: preserve-3d;
7.     transform-origin: center center;
8.     margin: 15px auto;
9.     height: 24px; width: 24px;
10.     position: absolute;
11. }
12.  
13. .face {
14.     background: rgba(255,255,255,0.5);
15.     border: 1px solid #bababa;
16.     box-shadow: inset 0 0 5px #8ecbde, 0 0 2px #fff;
17.     color: #55dede;
18.     font-size: 12px;
19.     height: 24px;
20.     line-height: 24px;
21.     position: absolute;
22.     text-align: center;
23.     width: 24px;
24. }
25.  
26. .face img {padding: 1px;}
27. .face:nth-child(1) {transform: translateZ(12px);}
28. .face:nth-child(2) {transform: rotateY(90deg) translateZ(12px);}
29. .face:nth-child(3) {transform: rotateY(90deg) rotateX(90deg) translateZ(12px);}
30. .face:nth-child(4) {transform: rotateY(180deg) rotateZ(90deg) translateZ(12px);}
31. .face:nth-child(5) {transform: rotateY(-90deg) rotateZ(90deg) translateZ(12px);}
32. .face:nth-child(6) {transform: rotateX(-90deg) translateZ(12px);}
33.  
34. @-webkit-keyframes spincube {
35. from,to {transform: rotateX(0deg) rotateY(0deg) rotateZ(0deg);}
36. 16% {transform: rotateY(-90deg);}
37. 33% {transform: rotateY(-90deg) rotateZ(90deg);}
38. 50% {transform: rotateY(-180deg) rotateZ(90deg);}
39. 66% {transform: rotateY(-270deg) rotateX(90deg);}
40. 83% {transform: rotateX(90deg);}
41. }
42.  
43. @keyframes spincube {
44. from,to {transform: rotateX(0deg) rotateY(0deg) rotateZ(0deg);}
45. 16% {transform: rotateY(-90deg);}
46. 33% {transform: rotateY(-90deg) rotateZ(90deg);}
47. 50% {transform: rotateY(-180deg) rotateZ(90deg);}
48. 66% {transform: rotateY(-270deg) rotateX(90deg);}
49. 83% {transform: rotateX(90deg);}
50. }
51. </style>

при таком раскладе куб вращается по вертикали и всегда влево, нужно чтобы также по вертикали вращался, но при этом по горизонтали всегда вправо.

На фото ниже видно, как в данный момент вращается куб, нужно тоже самое, только чтобы вращался не влево, а вправо.



Просьба помочь разобраться в этом вопросе, изменяла значение CSS свойств - rotateY, rotateZ, rotateX, а также перемещение translateY и translateX, которое необходимо задавать при вращении, но получается как-то коряво...
--- Добавлено ---
P.S.: Правильно, когда один поворот по горизонтали и следующий поворот по вертикали и цикл повторяется. На представленной картинке отображение неправильно, сделала ещё одно "правильное" наглядное вращение

здесь вращение вращение по вертикали, далее вращение по горизонтали налево и повторение.
Нужно, чтобы вращение было не налево, а направо, что в данный момент решить не получается.

Заранее благодарна.

 

Здравствуйте, что-то подобное я уже пробовала, но там не смогли решить данный момент...

 

Да, вы правы, так будет удобней и наглядней, хотя уже стала сомневаться, что эту проблему вообще можно решить, так как пока всё получалось как-то коряво.
Спасибо за подсказку !
--- Добавлено ---
Здесь пронумеровала все стороны куба для наглядности:
https://jsfiddle.net/0qkf2szm/1/

 

Здравствуйте, не всё так просто, как может показаться на первый взгляд.
Я так уже год тому назад пробовала делать, да и по-другому пыталась решить, но ничего не вышло.

1. Если вы обратите внимание, то в примере https://jsfiddle.net/0qkf2szm/9/
имеется поворот по вертикали, где происходит вращение сразу 3 разу, далее всё нормально

2. В примере https://jsfiddle.net/0qkf2szm/1/ всё нормально, вращение происходит без рывков, плавно и один раз за поворот.
Нужно то же самое, только не налево, а направо вращение. Казалось бы, задай отрицательные значения и OK, но не тут то было.
Работает, но корректно...

3. У меня просто будут 2 куба и они по задумке будут вращаться в разные стороны, с одним кубом разобралась, а вот с кубом, где вращение по горизонтали направо не получается реализовать правильно...то ли браузеры не поддерживают или тут нужно как-то по другому решить данную проблему.

В любом случае, спасибо вам за помощь.

 

В моём случае не приемлемо, у меня на каждой грани вместо цифр будет изображения и будет не очень хорошо, если 3 из 6 изображений будут сразу "пролетать", а потом снова вращаться нормально.
Для 1 варианта, всё чётко и вращение плавное и я успеваю все изображения рассмотреть, а во втором хотелось бы, чтобы был такой же эффект, только в другую сторону.

Конечно, могу сделать 2 куба с одинаковым вращением, но с разным было бы гораздо красивей. Вот и думала, как же это можно реализовать. Сначала, тоже думала, что ерунда, а на самом деле, тут придётся подумать и основательно...

 

Да, это я знаю и в сss более или менее разбираюсь, но вот данный момент реализовать самостоятельно не смогла до конца правильно, вот и подумала, что может здесь кто-нибудь опытнее меня сможет справится с этой задачей.

Спасибо за ответ, Ольга

 

Здравствуйте, на этих сайтах уже был мой знакомый, но там тоже не смогли решить данный момент. Пробовали средствами GSAP, но тоже результат не тот...а интересно можно ли средствами css3 сделать, для 1 варианта https://jsfiddle.net/0qkf2szm/1/ без проблем, а для второго https://jsfiddle.net/0qkf2szm/9/ не получается...

Будем дальше экспериментировать, может что и получится...

 

Здравствуйте, по этой ссылке http://jsfiddle.net/L2j580bc/1/ всё понятно, происходит просто вращение вправо, а мне надо как в моём примере https://jsfiddle.net/0qkf2szm/1/, где происходит вращение и по вертикали и по горизонтали налево, мне нужно точно также, только вращение должно быт не налево, а направо.
В любом случае спасибо за помощь.

 

Здравствуйте,
В примере https://jsfiddle.net/0qkf2szm/1/:

1. Вращение по горизонтали налево - грани (1,2 - 3,4 - 5,6)
2. Вращение по вертикали - грани (2,3 - 4,5 - 6,1)

Нужно тоже самое, только в пункте 1 вращение не налево, а направо

Спасибо за отклик.

 

Здравствуйте, вопрос не в деньгах, все работы делаю сама, также представляю все коды и информацию.
Кстати для тех, кто хочет учиться. Так как работаю исключительно для себя, то мне не горит, будет ли данный момент в сообщении #18 реализован, просто можно ли данный момент на css реализовать или нет.

Кстати зачем меня направлять, есть интернет, Google в помощь, спасибо ссылки на сайты (на которых я уже более года назад была).

P.S.: Если бы я всё делала для кого-либо за деньги...то не было знакомых совсем. Я могу понять какой-то сложный скрипт, любая работа должна оплачиваться, но здесь форум, люди обмениваются опытом, кто-то опытнее, а кто-то начинающий. Давайте всем говорить про деньги ? тогда и форум не нужен будет.
Может быть мы в России поэтому, так и живём, что всё вращается вокруг денег и человеческого нормального отношения мало.

Ещё раз напоминаю, данную тему я начала, потому что мне интересно, можно реализовать или нет. Разве я писала, что мне надо или у меня горит, сделайте что-нибудь (тогда, конечно, можно говорить про деньги ).
У меня был просто вопрос к опытным коллегам, а вы в итого написали про деньги. Печально, что так всё закончилось, ну да ладно.

Спасибо всем, кто откликнулся и кто попытался что-то сделать.
С уважением, Ольга

 

Спасибо будем дальше экспериментировать, глядишь и получится.