CSS-кубы, устранение проблем с сеткой

Question

Итак, моя цель состоит в том, чтобы эти кубы были на сетке, и они выстраивались в линию, перетаскивались и были доступны. Я получил кубики, работающие хорошо на основе this example, но я не полностью понимаю некоторые из механиков и, как таковые, имею некоторые проблемы.

1. Куб начинается больше, чем после его вращения. Чтобы увидеть это, просто нажмите «1», который применит класс «show-front», пока вы все еще на лицевой стороне. Он сразу же сократится.

2. Ось куба не центрирована, поэтому при повороте она заканчивается в разных координатах xy.

3. В CSS Я устанавливаю размер 200x200 (или любой коэффициент 25), но из-за преобразования Z это не совсем правильно. Этот файл в основном исправлен, см. Обновление внизу.

Как я могу исправить эти три вещи?

Вот скрипка: http://jsfiddle.net/scottbeeson/phJpS/

Вот CSS, который является важной частью:

.itemView { 
     width: 200px; 
     height: 200px; 
     /*position: relative;*/ 
     /*margin: 0 auto 40px;*/ 
     /*border: 1px solid #CCC;*/ 
     -webkit-perspective: 1000px; 
     -moz-perspective: 1000px; 
      -o-perspective: 1000px; 
       perspective: 1000px; 
     -webkit-margin-start: 0 !important; 
     -webkit-margin-before: 0 !important; 
     -webkit-margin-end: 0 !important; 
     -webkit-margin-after: 0 !important; 
    } 

    .cube { 
     width: 100%; 
     height: 100%; 
     position: absolute; 
     -webkit-transform-style: preserve-3d; 
     -moz-transform-style: preserve-3d; 
      -o-transform-style: preserve-3d; 
       transform-style: preserve-3d; 
     -webkit-transition: -webkit-transform 1s; 
     -moz-transition: -moz-transform 1s; 
      -o-transition: -o-transform 1s; 
       transition: transform 1s; 
    } 

    .cube figure { 
     display: block; 
     position: absolute; 
     width: 196px; 
     height: 196px; 
     border: 2px solid black; 
     color: white; 
    } 

    .cube.panels-backface-invisible figure { 
     -webkit-backface-visibility: hidden; 
     -moz-backface-visibility: hidden; 
      -o-backface-visibility: hidden; 
       backface-visibility: hidden; 
    } 

    .cube .front {  
     background-color: #555; 
     border: 1px solid #ccc; 
    } 
    .cube .back { 
     background-color: #555; 
     border: 1px solid #ccc; 
    } 
    .cube .right { 
     background-color: #555; 
     border: 1px solid #ccc; 
    } 
    .cube .left { 
     background-color: #555; 
     border: 1px solid #ccc; 
    } 
    .cube .top { 
     background-color: cornflowerblue; 
     border: 1px solid #ccc; 
    } 
    .cube .bottom { 
     background-color: #555; 
     border: 1px solid #ccc; 
    } 

    .cube .front { 
     -webkit-transform: translateZ(99px); 
    } 
    .cube .back { 
     -webkit-transform: rotateX(-180deg) translateZ(99px); 
    } 
    .cube .right { 
     -webkit-transform: rotateY( 90deg) translateZ(99px); 
    } 
    .cube .left { 
     -webkit-transform: rotateY( -90deg) translateZ(99px); 
    } 
    .cube .top { 
     -webkit-transform: rotateX( 90deg) translateZ(99px); 
    } 
    .cube .bottom { 
     -webkit-transform: rotateX( -90deg) translateZ(99px); 
    } 

    .cube.show-front { 
     -webkit-transform: translateZ(-99px); 
    } 
    .cube.show-back { 
     -webkit-transform: translateZ(-99px) rotateX(-180deg); 
    } 
    .cube.show-right { 
     -webkit-transform: translateZ(-99px) rotateY( -90deg); 
    } 
    .cube.show-left { 
     -webkit-transform: translateZ(-99px) rotateY( 90deg); 
    } 
    .cube.show-top { 
     -webkit-transform: translateZ(-99px) rotateX( -90deg); 
    } 
    .cube.show-bottom { 
     -webkit-transform: translateZ(-99px) rotateX( 90deg); 
    } 

.itemHandle { 
    position: absolute; 
    top: 0px; 
    left: 0px; 
    right: 0px; 
    cursor: move; 
    white-space: nowrap; 
    background-color: cornflowerblue; 
    text-align: left; 
    /*border-top-right-radius: 15px;*/ 
} 

Кроме того, если кто-то чувствует, что они должны быть отдельные вопросы, это нормально. Я просто подумал, что они все являются частью одной и той же «проблемы», и было бы проще, если бы вы отправили одну и ту же скрипку 3 раза.

обновление на # 1, # 3 (updated fiddle)

Я был в состоянии изменить transformZ передней поверхности до 0 и отрегулировать остальные преобразования в основном делают переднюю грань куба на той же плоскости, что и «workArea». Это намного лучше, но перспектива немного не так, как будто вы не смотрите в сторону куба. Не заметно, если лица не полупрозрачны. Вот обновленный CSS:

.cube .front { 
    -webkit-transform: translateZ(0px); 
} 
.cube .back { 
    -webkit-transform: rotateX(-180deg) translateZ(200px); 
} 
.cube .right { 
    -webkit-transform: rotateY( 90deg) translateZ(100px) translateX(100px); 
} 
.cube .left { 
    -webkit-transform: rotateY( -90deg) translateZ(100px) translateX(-100px); 
} 
.cube .top { 
    -webkit-transform: rotateX( 90deg) translateZ(100px) translateY(-100px); 
} 
.cube .bottom { 
    -webkit-transform: rotateX( -90deg) translateZ(100px) translateY(100px); 
} 

Answer 1

Цифры отключены из-за поля и отступов.

Try:

.cube figure { 
    display: block; 
    position: absolute; 
    width: 200px; 
    height: 200px; 
    border: 0px solid black; 
    color: white; 
    margin: 0px; 
    padding: 0px; 
    } 

Добавлена ​​маржа и обивка = 0

demo

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

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