Проблемы совместимости CSS3 и браузеров

[romoga]

Привет.

есть код вращения некого куба, но работает только в firefox 26.0

Safari 5.1.7 не пашет

Opera 18.0.1284.68 не пашет

Chrome 32.0.1700.76 m не пашет

Все браузеры обновлены на текущий день..

делаю -o- -webkit- пофигу.((((

transform-origin: 50% 50% -105px;		-webkit-transform-origin: 50% 50% -105px;		-moz-transform-origin: 50% 50% -105px;		-o-transform-origin: 50% 50% -105px;	transform-style:preserve-3d;		-moz-transform-style:preserve-3d;		-o-transform-style:-o-preserve-3d;		-webkit-transform-style:preserve-3d;	transition: all 1s ease-in-out;		-o-transition: all 1s ease-in-out;		-moz-transition: all 1s ease-in-out;		-webkit-transition: all 1s ease-in-out;	

[hypnocolor]

http://jsfiddle.net/hypnocolor/jFaN2/

Работает всё. Что ещё за значение -o-preserve-3d; у вас в коде?

Edited January 21, 2014 by hypnocolor

[romoga]

а вот этот код? грани не отображаются

http://jsfiddle.net/jFaN2/4/

[Great Rash]

Статус спецификации - working draft (черновик). Не удивительно, что в половине браузеров не работает.

[romoga]

а подробнеее можно? что сделать.???

[Great Rash]

а подробнеее можно?

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

что сделать.???

Отказаться от задуманного или реализовать похожий эффект другими средствами (SVG, Canvas, WebGL).

[Zverushka]

Помимо этого ведь неправиьлно сначала вставлять свойство, а потом это же свойство с префиксами? Свойство должно быть последним же.

[lexxcode]

Вот вам кубик http://jsfiddle.net/alexriz/X8KNQ/

Дальше, думаю, разберетесь, как его настроить под свои задачи

[romoga]

блиин.он жутко тормозит но работает везде кроме оперы....

мой куб летает, но не паешт ..там вся пробема в выводе сторон...в  вашем примере перерисовывается все в 3д

.cube-side_right {    background:rgba(180,180,0,.4);    -webkit-transform: rotate3d(0, 1, 0, 90deg) translate3d(0, 0, 100px);    transform: rotate3d(0, 1, 0, 90deg) translate3d(0, 0, 100px);

у меня же только сторона

#side6 {		transform: rotateY(180deg) translate3d(  5px );	-moz-transform: rotateY(180deg) translate3d(  5px );	-webkit-transform: rotateY(180deg) translateZ(  5px );	-o-transform: -o-rotateY(180deg) translateZ(  5px );}

Как быть?...в инете нахожу инфу про кубы аж 2011 годом..т.е. 3 года как все рабоатют с 3д кубами и НИ у Одного кодера нет рабочей модели...жмоты ((((

[Animkim]

У меня на хроме куб от alexriz работает идеально.

[lexxcode]

блиин.он жутко тормозит но работает везде кроме оперы....

Обновляйте железо Да и в опере он тоже работает 

 

И еще одно, актуальное свойство без префикса нужно писать последним