Объяснение точных измерений css 3d cube

Question

Я создал куб на основе этого примера. http://css3.bradshawenterprises.com/transforms/#cubecarousel

Что мне нужно, чтобы понять, как я могу получить точную меру (например, 200 пикселей) лицевой стороны?

Обычно вы определяете грани куба, а затем применяете преобразование на половине объекта (50%), чтобы объект перемещался вперед. Как бы я отталкивал его назад, так что лицевая сторона соответствовала 200px?

Спасибо

Answer 1

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

В любом случае, я думаю, что ваши текущие изображения 200px?

Затем, принимая во внимание, что (из вашей ссылке):

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

Если вы переводите свой куб на 100 пикселей (половина ширины) назад, ваши изображения будут ровно 200 пикселей.

Если изображения не 200px, безусловно, размещать код

Answer 2

Ok, вот скрипку: jsfiddle.net/K99GS я пытался толкая его назад, но он изменяет стержень так вращается от неправильного происхождения. ..

Answer 3

Хорошо после попытки на один день ... Я узнал, что мое решение было DUD. Вот точный куб (216px) и код. Как оттолкнуть его назад ???????? Вот соответствующий код CSS:

#controls, #transparency { 
    text-align:center; 
} 
#controls span { 
    padding-right:2em; 
    cursor:pointer; 
} 

#cubeCarousel { 
-webkit-perspective: 800; 
-moz-perspective: 800px; 
-ms-perspective: 800; 
perspective: 800; 

-webkit-perspective-origin: 50% 100px; 
-moz-perspective-origin: 50% 100px; 
-ms-perspective-origin: 50% 100px; 
perspective-origin: 50% 100px; 

margin:100px auto 20px auto; 
width:216px; 
height:216px; 
} 

#cubeCarousel #cubeSpinner { 
    position: relative; 
    margin: 0 auto; 
    height: 216px; 
    width: 216px; 
    -webkit-transform-style: preserve-3d; 
    -moz-transform-style: preserve-3d; 
    -ms-transform-style: preserve-3d; 
    transform-style: preserve-3d; 

    -webkit-transform-origin: 50% 108px 0; 
    -moz-transform-origin: 50% 108px 0; 
    -ms-transform-origin: 50% 108px 0; 
    transform-origin: 50% 108px 0; 

    -webkit-transition:all 1.0s ease-in-out; 
    -moz-transition:all 1.0s ease-in-out; 
    -ms-transition:all 1.0s ease-in-out; 
    transition:all 1.0s ease-in-out; 

} 

#cubeCarousel #Ycube,#cubeCarousel #Zcube { 
-webkit-transform-style: preserve-3d; 
-moz-transform-style: preserve-3d; 
-ms-transform-style: preserve-3d; 
transform-style: preserve-3d; 
} 

#cubeCarousel .face { 
position: absolute; 
height: 216px; 
width: 216px; 
padding: 0px; 
background-color:rgba(0,0,0,0.5); 
} 


#cubeSpinner .one { 
-webkit-transform: translateZ(108px); 
-moz-transform: translateZ(108px); 
-ms-transform: translateZ(108px); 
transform: translateZ(108px); 
} 

#cubeSpinner .two { 
-webkit-transform: rotateY(90deg) translateZ(108px); 
-moz-transform: rotateY(90deg) translateZ(108px); 
-ms-transform: rotateY(90deg) translateZ(108px); 
transform: rotateY(90deg) translateZ(108px); 
} 

#cubeSpinner .three { 
-webkit-transform: rotateY(180deg) translateZ(108px); 
-moz-transform: rotateY(180deg) translateZ(108px); 
-ms-transform: rotateY(180deg) translateZ(108px); 
transform: rotateY(180deg) translateZ(108px); 
} 

#cubeSpinner .four { 
-webkit-transform: rotateY(-90deg) translateZ(108px); 
-moz-transform: rotateY(-90deg) translateZ(108px); 
-ms-transform: rotateY(-90deg) translateZ(108px); 
transform: rotateY(-90deg) translateZ(108px); 
} 

в действии -> http://jsfiddle.net/K99GS/5/