CSS rotation Cube UI

Я пытаюсь создать 3d-меню ui, которое вращается как куб, я борюсь с 3D вращающимся эффектом. 2 элемента вращаются, но я не знаю, как показать эффект 3d-куба. любые предложения, как я могу сделать его вращаться, как кубаCSS rotation Cube UI

http://jsfiddle.net/dfw3vLag/

<style> 
    body 
    { 
     background: #333; 
     font-family: sans-serif; 
     color: #333333; 
    } 

    ul.list 
    { 
     list-style-type: none; 
     margin: 50px auto; 
     padding: 0; 
     width: 300px; 
    } 

    ul.list li 
    { 
     position: relative; 
     height: 40px; 
     line-height: 40px; 
     margin-bottom: 2px; 
    } 

    ul.list li div.front 
    { 
     position:absolute; 
     transform: rotateX(0deg); 
     -webkit-transform-style: preserve-3d; 
     z-index:2; 
     transform-origin: top right; 
     background:#FC0; 
     width:90%; 
     height:100%; 
     padding: 0 10px; 
     backface-visibility: hidden; 
     transition: transform 2s linear 0s; 
    } 

    ul.list li div.back 
    { 
     position:absolute; 
     transform: rotateY(-90deg); 
     -webkit-transform-style: preserve-3d; 
     z-index:1; 
     transform-origin: top left; 
     background:#FC0345; 
     width:90%; 
     height:100%; 
     padding: 0 10px; 
     backface-visibility: hidden; 
     transition: transform 2s linear 0s; 
    } 

    ul.list li:hover 
    { 
     cursor: pointer; 
    } 

    ul.list li:hover div.front 
    { 
     transform: rotateY(90deg); 
    } 
    ul.list li:hover div.back 
    { 
     transform: rotateY(0deg); 
    } 

    </style> 


    <ul class="list"> 
     <li> 
     <div class="back"></div> 
     <div class="front">list A</div> 
     </li> 
     <li> 
     <div class="back"></div> 
     <div class="front">list B</div> 
     </li> 
     <li> 
     <div class="back"></div> 
     <div class="front">list C</div> 
     </li> 
     <li> 
     <div class="back"></div> 
     <div class="front">list D</div> 
     </li> 
    </ul>

источник

2014-12-20 Karish Karish

добавить перспективную недвижимость – vals

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

сам li поворачивается на hover вместо div.front и div.back отдельно - они просто расположены и повернуты на начальном этапе.

Протестировано на Chrome v39.

Значения ширины и отступов вызывают поворот вращающейся поверхности, поэтому я изменил их.

body { 
 
    background: #333; 
 
    font-family: sans-serif; 
 
    color: #333333; 
 
} 
 
ul.list { 
 
    list-style-type: none; 
 
    margin: 50px auto; 
 
    padding: 0; 
 
    width: 300px; 
 
} 
 
ul.list li { 
 
    position: relative; 
 
    height: 40px; 
 
    line-height: 40px; 
 
    margin-bottom: 2px; 
 
    transition: transform 1s linear 0s; 
 
    transform-style: preserve-3d; 
 
    transform-origin: left left -145px; 
 
} 
 
ul.list li div.front { 
 
    position: absolute; 
 
    background: #FC0; 
 
    width: 100%; 
 
    height: 100%; 
 
    /* padding: 0 10px; */ 
 
    transform: translateZ(145px); 
 
    box-sizing: border-box; 
 
} 
 
ul.list li div.back { 
 
    position: absolute; 
 
    background: #FC0345; 
 
    width: 100%; 
 
    height: 100%; 
 
    /* padding: 0 10px; */ 
 
    transform: rotateY(90deg) translateZ(-145px); 
 
} 
 
ul.list li:hover { 
 
    cursor: pointer; 
 
    transform: rotateY(90deg); 
 
}

<body> 
 
    <ul class="list"> 
 
    <li> 
 
     <div class="back"></div> 
 
     <div class="front">list A</div> 
 
    </li> 
 
    <li> 
 
     <div class="back"></div> 
 
     <div class="front">list B</div> 
 
    </li> 
 
    </ul> 
 
</body>

источник

2014-12-20 20:51:29 user2570380

Спасибо за вашу помощь. я просто не понимаю, зачем мне нужно размер коробки: border-box; если я удалю, все это отключено. возможно ли это сделать без рамки: border-box; @ user2570380 –

Я думаю, вы добавили 'padding' или изменили' width'. Он выглядит отлично, без 'box-sizing: border-box;' [здесь] (http://jsfiddle.net/dfw3vLag/3/). Кроме того, [это] (http://stackoverflow.com/questions/9430039/css3-3d-transformation-card-flip-padding-margin-border-will-cause-the-rotation) может иметь значение. – user2570380

CSS rotation Cube UI

ответ

Смежные вопросы