CSS3 преобразование поворота "на" n градусов

Question

У меня есть куб (ну почти), состоящий из 4 делителей, которые я вращаю, используя преобразования CSS3 (в настоящее время ограничено -webkit, так как это для расширения Chrome.)

Однако, вы увидите, что если вы перейдете к http://jsfiddle.net/CxYTg/ и нажмете «один», «два», «три», «четыре», а затем снова на «один», последний поворот идет в обратном направлении для возврата к исходной ориентации.

Есть ли способ исправить это с помощью CSS3? Мне интересно, есть ли способ сделать что-то вроде:

#environment li.rota180:first-of-type .cubeface { -webkit-transform: rotateY( "by 90deg") translate3d(0, 0, 100px); }

(И да, я знаю, что мог бы просто сделать это с помощью JavaScript - но я хотел бы узнать, возможно ли это сделать только с помощью CSS.)

Answer 1

Нет способа сделать это с помощью чистого CSS.
Чтобы реализовать это так, как вы хотели, вам нужны переменные и условия. Использовать javascript проще.
Все, что вам нужно сделать, это создать две переменные, одну для градусов и одну для запоминания текущего поля.Остальное - просто условия.