Анимированный кубоподобный эффект (только две грани) с CSS3

Я хотел бы воспроизвести этот jsfiddle, который я подготовил на основеэтот удивительный урок (пожалуйста, проверьтедемо). Но я нене хочу функциональность клавиш, просто при наведении.

http://jsfiddle.net/b5rmW/5/

Но это использует только 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); 

}

http://jsfiddle.net/5XTeU/1/

Но эффект, кажется, не то же самое.

Как вы думаете, какие минимальные div, необходимые для достижения этой первой скрипки?

Thanks.I»

 andyb20 мая 2013 г., 13:03
Я обновил свой ответ дляфронт а такжебоковая сторона вращение лица, которое соответствует другой демонстрационной скрипке.
 Toni Michel Caubet20 мая 2013 г., 12:31
Второй. Является ли мой сбой в удалении нежелательных div-ов из скрипки 1 (которая работает нормально), поэтому мне нужна помощь со второй скрипкой; Который использует только 2 лица. Спасибо!
 andyb20 мая 2013 г., 12:46
Хорошо, спасибо за разъяснения. Так какие 2 лица это должно быть? Вы хотите повернуть 2 лица, которые связаны -фронт ибоковая сторона - илифронт а такженазад которые не связаны?
 andyb20 мая 2013 г., 12:14
Я как бы сомневаюсь в моем ответе сейчас, так как на самом деле есть 2 демонстрации jsFiddle в вопросе. Первая скрипка не имеетфронт а такженазад, Это'на самом делефронт а такжебоковая сторона, Так с какой скрипкой ты хочешь помочь? Кроме того, вы хотитефронт а такженазад вращающаяся?

Ответы на вопрос(1)

Решение Вопроса

Обновить: Так что небольшое недоразумение, на котором лица должны существовать ... так что это обновление дляфронт а такжебоковая сторона вращение лица.

Тем не менее, в оригинальном ответе ниже, пункты 1) и 2) все еще являются действительными проблемами с кодом. Пункты 3) и 4) больше не применяются, так как они касалисьназад лицо. Остальные правила CSS могут быть удалены. Вы также можете вытащитьперспективы Обертка, чтобы дать куб "менее плоский " Смотреть видетьобновленная демка.

HTML

<div id="experiment">
    <div class="cube">
        <div class="face front">
            front face
        </div>
        <div class="face side">
            side face
        </div>
    </div>
</div>

CSS

#experiment {
    -webkit-perspective: 800;
    -webkit-perspective-origin: 50% 200px;

    -moz-perspective: 800;
    -moz-perspective-origin: 50% 200px;
}

.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;
    font-size: 27px;
    line-height: 1em;
    color: #fff;
    border: 1px solid #555;
    border-radius: 3px;
}

.cube .front {
    -webkit-transform: translateZ(150px);
    -moz-transform: translateZ(150px);
    background-color:red;
}

.cube .side {
    -webkit-transform: rotateY(-90deg) translateZ(150px);
    -moz-transform: rotateY(-90deg) translateZ(150px);
    background-color:orange;
}

.cube:hover{
    -webkit-transform:rotateY(90deg);     
}

Оригинальный ответ

Есть 4 проблемы с демо-кодом, так что давайтеРассмотрим их по отдельности и посмотрим, какое решение для каждого из них:

1) HTML имеет опечатку в классе дляфронт лицо - оно отсутствуетr

 вместо

2) Для браузеров Webkit вам нужно использовать префиксное свойство дляtransform

-webkit-transform:rotateY(90deg); вместоtransform:rotateY(90deg);

3)назад лицо, которое вы выбрали, это не то лицо. Вы перепрофилировалиоставил лицо случайно.фронт лицо правильное, что является

 переведенный150px наружу. Таким образом, соответствующийназад лицо должно быть переведено-150px внутренности. Однако, если мы просто сделаем это, положение будет правильным, но при вращении вокруг центра куба задняя грань окажется в обратном направлении. Так правильноназад лицо - это то, которое изначально поворачивается на 180 ° вокругY ось. Тем не менее, вращая вокругY ось перевода вдольZ все еще должен быть+150px и не .-150px

.cube .back{
  -webkit-transform: rotateY(180deg) translateZ(150px);
  -moz-transform: rotateY(180deg) translateZ(150px);
   background:orange;
}

4) Вращение, чтобы получитьназад лицом в положение, гдефронт Начинается вращение на 180 ° а не 90 °

.cube:hover{
    -webkit-transform:rotateY(180deg);
}

Объединение всех этих изменений даетэто демо.

HTML

<div class="cube">
    <div class="face front">
        front face
    </div>
    <div class="face back">
        back face
    </div>
</div>

CSS

.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;
    font-size: 27px;
    line-height: 1em;
    color: #fff;
    border: 1px solid #555;
    border-radius: 3px;
}

.cube .front {
    -webkit-transform: translateZ(150px);
    -moz-transform: translateZ(150px);
    background-color: red;
}

.cube .back {
    -webkit-transform: rotateY(180deg) translateZ(150px);
    -moz-transform: rotateY(180deg) translateZ(150px);
    background:orange;
}

.cube:hover{
    -webkit-transform:rotateY(180deg);
    -moz-transform: rotateY(180deg);
    transform:rotateY(180deg);
}
 Mr. Alien26 апр. 2014 г., 11:31
Наслаждайся своим новым значком;) просто заметка, твое зависание не удастся в Firefox
 Toni Michel Caubet20 мая 2013 г., 19:08
Спасибо вам большое! Какой подробный ответ и решение лучше (крошечный эффект 3d, который вы добавили), чем тот, который я просил!
 Mr. Alien26 апр. 2014 г., 12:50
@andyb Я бы порекомендовал вам также добавить стандартные свойства, Firefox поддерживает стандартные, и ха-ха, спасибо за приятные слова :) У вас тоже довольно хороший профиль ...
 andyb20 мая 2013 г., 21:42
Рад был помочь! Какая часть не работает в FF? Я могу'Я проверяю FF прямо сейчас, но могу посмотреть, что я смогу сделать завтра.
 Toni Michel Caubet20 мая 2013 г., 19:21
(это неКажется, что это работает в FF, но я думаю, что когда я конвертирую его в compas mixins, это будет)
 jdepypere29 июл. 2013 г., 21:46
@andyb: вы, кажется, много знаете о css3, знаете ли вы,Можно ли добавить тени на лица, которые не параллельны зрителю? Проверьте мой вопрос:stackoverflow.com/questions/17903674/css3-3d-box-with-shadows
 andyb26 апр. 2014 г., 12:09
Спасибо за значок и комментарий @ Мистер Алиен. Я добавил-moz-transform но я не могу проверить на Firefox в данный момент. Я неНе знаю, как тебе удается тратить столько времени на ТАК, но я вижу тебя все время! У вас очень впечатляющий профиль :-)

Ваш ответ на вопрос