Анимированный кубоподобный эффект (только две грани) с CSS3
Я хотел бы воспроизвести этот jsfiddle, который я подготовил на основеэтот удивительный урок (пожалуйста, проверьтедемо). Но я нене хочу функциональность клавиш, просто при наведении.
Но это использует только 2 лица (спереди и сзади).
Я пытался, вот так:
#cube {
position: relative;
margin: 100px auto 0;
height: 300px;
width: 300px;
-webkit-transition: -webkit-transform .5s linear;
-webkit-transform-style: preserve-3d;
-moz-transition: -moz-transform .5s linear;
-moz-transform-style: preserve-3d;
}
.face {
position: absolute;
height: 300px;
width: 300px;
padding: 0px;
background-color: rgba(50, 50, 50, 1);
font-size: 27px;
line-height: 1em;
color: #fff;
border: 1px solid #555;
border-radius: 3px;
}
#cube .one {
-webkit-transform: rotateX(90deg) translateZ(150px);
-moz-transform: rotateX(90deg) translateZ(150px);
background:red;
}
#cube .two {
-webkit-transform: translateZ(150px);
-moz-transform: translateZ(150px);
background:gold;
}
#cube .three {
-webkit-transform: rotateY(90deg) translateZ(150px);
-moz-transform: rotateY(90deg) translateZ(150px);
background:blue;
}
#cube .four {
-webkit-transform: rotateY(180deg) translateZ(150px);
-moz-transform: rotateY(180deg) translateZ(150px);
background:green;
}
#cube .five {
-webkit-transform: rotateY(-90deg) translateZ(150px);
-moz-transform: rotateY(-90deg) translateZ(150px);
background:orange;
}
#cube .six {
-webkit-transform: rotateX(-90deg) rotate(180deg) translateZ(150px);
-moz-transform: rotateX(-90deg) rotate(180deg) translateZ(150px);
}
#cube:hover{
transform:rotateY(90deg);
}
Но эффект, кажется, не то же самое.
Как вы думаете, какие минимальные div, необходимые для достижения этой первой скрипки?
Thanks.I»