есть две части к этому.

1. первое-это здание 3D фигуру.
2. второй -анимация это (и это простая часть).

это css3 или html5 или оба?

это С помощью CSS3. В CSS 3D-преобразования и анимация ключевых кадров.

сколько javascript мне нужно?

Ну, если вы не хотите создавать 3D-форму с помощью JavaScript, вам не нужен JavaScript для ее анимации. Любой браузер, который поддержка 3D-преобразований и поддерживает анимацию ключевых кадров и если в браузере поддерживает анимации ключевых кадров, то вы, вероятно, хотите использовать их вместо jQuery (и, возможно, даже ваши собственные пользовательские JS) анимации.

какие браузеры поддерживают это?

два года назад все выглядело не очень хорошо, но сейчас становится лучше...

✓ Chrome, сафари, Firefox (хотя Firefox 3D-анимации jiggly и не приятно для моего процессора... Я делаю есть 6-летний старый ноутбук, это правда) Opera 15+ (WebKit) поддержка 3D-преобразования. И, конечно, анимации ключевых кадров.

Firefox поддерживает все неподготовленные, Chrome / Safari / Opera нужны -webkit- префикс - обновление: Chrome 36+ и Opera 23 + также поддерживают их неподготовленными, поэтому теперь осталось только Safari. Я не буду использовать префиксы в ответе или в демо (-prefix-free заботится о вещах там.) еще одно обновление: сафари 9 unprefixes преобразований.

✗ 3D-преобразования не поддерживаются Опера перед переключением на WebKit.

IE IE до и включая 9 не поддерживает 3D-преобразования. в IE10 и IE11 поддержка 3D-преобразований, но не поддерживает вложенность 3D преобразованных элементов (не удается создать реалистичный 3D формы путем применения 3D-преобразований как на родительских, так и на дочерних элементах, поскольку 3D-преобразованные дети 3D-преобразованного родителя уплощаются в плоскость родителя). обновление: Edge теперь поддерживает вложенность 3D-преобразованных элементов.

---

хорошо, я надеюсь, что это прояснит несколько вещей. Сейчас...

1 построение Куба CSS.

1.2 что такое куб и начинается с HTML

прежде всего, попробуйте представить куб. Может быть!--199-->этой ссылке помогает? Или давайте и здесь представим.

оно имеет 6 квадратных сторон. 1 сверху, 1 снизу, 1 спереди, 1 сзади; 1 слева, 1 справа. Это означает, что HTML просто:

<ul class='cube'>
    <li class='face'></li>
    <li class='face'></li>
    <li class='face'></li>
    <li class='face'></li>
    <li class='face'></li>
    <li class='face'></li>
</ul>

вы сначала положите некоторую регулярность в лица, дайте им равной width и height, позиция их совершенно, так что они все сложены одна поверх другой, дайте им другое прошлое, они не возражают. Вы можете дать им некоторые дополнения, положить в них фиктивный текст, что угодно...

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

1.2 Система Координат

считайте это 3D система координат:

первоначально все 6 граней находятся именно там, где вы видите синий квадрат, в the xOy самолет (где O является пересечением 3 осей).

обратите внимание на направление y-axis. Исходя из математического фона, это казалось мне немного странным сначала, но такова система координат для экрана.

в 2D, происхождение O в верхнем левом углу, поэтому + (положительное направление)x-axis указывает вправо и + на y-axis пунктов вниз.

1.2.ля Переводы по осям

таким образом, перевод положительного значения вдоль x-axis (например, translateX(10px)) перемещает элемент, к которому он применяется, вправо (в направлении + на x-axis), в то время как перевод отрицательного значения вдоль x-axis (что-то вроде translateX(-10px)) перемещает ее влево.

аналогично, перевод положительного значения вдоль y-axis (типа translateY(10px)) перемещает элемент вниз (в направлении + из y-axis), в то время как перевод отрицательного значения вдоль y-axis (типа translateY(-10px)) перемещает его вверх.

теперь добавьте другое измерение. С z-axis. The + (положительное направление)z-axis выходит из экрана к вам. Таким образом, перевод положительного значения вдоль z-axis (типа translateZ(10px)) перемещает элемент вперед (в направлении + на z-axis и к вам), в то время как перевод отрицательного значения вдоль z-axis (типа translateZ(-10px)) перемещает его назад (от вас).

1.2.б повороты вокруг осей

вращения положительных значений угла (например,rotate(15deg) - обратите внимание, что если ось вращения не указана, то предполагается, что это z-axis) в CSS по часовой стрелке и вращения отрицательных значений угла (например,rotate(-15deg)) идут против часовой стрелки.

и по часовой стрелке означает по часовой стрелке, как видно из + оси, вокруг которой вы поворачиваете элемент.

таким образом, положительное вращение вокруг x-axis означает вращение по часовой стрелке в yOz plane как видно из + на x-axis, который находится справа.

положительное вращение вокруг y-axis означает вращение по часовой стрелке в zOx plane (горизонтальная плоскость), как видно из + на y-axis, который находится внизу.

положительное вращение вокруг z-axis означает вращение по часовой стрелке в xOy plane (the плоскость экрана), как видно из + на z-axis, как вы, естественно, видите экран.

1.3 поместите грани в правильные положения, чтобы сформировать куб

1.3.1 положите одно лицо на перед

это означает перевод его вперед (в положительном направлении) вдоль z-axis. Что это? А translateZ положительного значения. Какую ценность? Ну, это должно быть половина width (или height, не имеет значения, это квадрат, они равны).

Предположим, у меня есть width: 16em;

тогда в этом случае вы переводите лицом вперед (вдоль положительного z-axis) by 16em/2 = 8em. В CSS, это

.face:nth-child(1) { transform: translateZ(8em); }

Примечание: перевести transform двигает всю систему координат элемента, который переводится (и, следовательно,transform-origin для всех последующих преобразований).

1.3.2 поставить второе лицо в назад

это просто, не так ли? Просто переведите вдоль z-axis, тем же значением в противоположном направлении, верно? .face:nth-child(2) { transform: translateZ(-8em); }, да?

хорошо... на самом деле... только если вы не хотите, чтобы контент на этом лице. Или если вы не хотите иметь в качестве фона изображение, для которого важно, что слева, а что справа.

каждый из эти квадраты, которые составляют куб, имеют переднюю и заднюю. Фронт-это тот, который направлен в позитивном направлении z-axis; та, что "смотрит на вас с экрана компьютера". Если вы поместите текст там, он течет нормально на передней панели. Но он выглядит вертикально отраженным на спине.

вот почему первое, что вы должны сделать, это повернуть вторую квадратную грань на 180° вокруг вертикальной оси (y-axis). После этого вы можете перевести эту секунду квадратное лицо вдоль z-axis для того, чтобы переместить его в спину.

на перевести значение снова положительный в этом случае. Как перевести transform движется система координат элемента, который переводится, поворот transform... что ж... поворот его. Это значит, что после rotateY(180deg) применения + на z-axis указывает назад (не к спереди).

таким образом, CSS, который вращается, а затем переводит вторую грань в ее положение на Кубе:

.face:nth-child(2) { transform: rotateY(180deg) translateZ(8em); }

Примечание: куб-это очень простая 3D-форма, но одно свойство CSS, которое я считаю очень полезным, чтобы проверить, правильно ли я повернул лица, - это backface-visibility. Если я установлю его в hidden и я не вижу повернутый элемент, это означает, что я смотрю на нее с спина.

1.3.3 положите третье лицо на право

прежде всего, его фронт должен "смотреть" вправо. Это означает, что он должен быть повернут вокруг y-axis так что + на z-axis заканчивается указывая вправо, а затем он должен быть переведен вдоль положительного z-axis тем же положительным значением (8em в этом случае), то есть половина длины стороны квадрата.

повернут на что угол? Ну, 90°, что означает, что CSS необходим:

.face:nth-child(3) { transform: rotateY(90deg) translateZ(8em); }

1.3.4 положите четвертую грань на левый

сначала поверните его на 90°, а иначе, чтобы его передняя часть "смотрела" влево. "Другой путь" означает rotateY(-90deg), затем примените тот же старый translateZ(8em). В одной строке CSS:

.face:nth-child(4) { transform: rotateY(-90deg) translateZ(8em); }

1.3.5 положите пятое лицо на top

сначала поверните его на 90° вокруг x-axis а затем перевести вдоль z-axis (который указывает вверх после вращения). CSS:

.face:nth-child(5) { transform: rotateX(90deg) translateZ(8em); }

1.3.6 поставить шестой (и последний!) лицо на top

повернуть 90° наоборот x-axis, затем перевести его вдоль z-axis (который указывает вниз после поворота). CSS:

.face:nth-child(6) { transform: rotateX(-90deg) translateZ(8em); }

1.4 перспективные и реалистичные 3D-формы

все грани куба теперь на месте. Но это не будет выглядеть как большая часть 3D-формы, если лица, которые ближе, кажутся больше, чем те, которые находятся дальше. Свойство CSS, которое заботится об этом, называется perspective и применяется к родительским элементам, которые имеют 3D-преобразования, примененные к ним.

это все равно не будет выглядеть как большая часть 3D-формы, если вы посмотрите перпендикулярно к центру передней грани, потому что вы не увидите никаких других граней. К исправьте это, вам нужно повернуть сам куб в 3D. И именно поэтому важно, чтобы браузер позволял вложить 3D преобразованные элементы.

вы включаете вложенность 3D преобразованных элементов с помощью transform-style: preserve-3d; на родительском элементе (.cube в данном случае). К сожалению, IE10 / 11 не поддерживают preserve-3d значение transform-style свойство (поддерживает только flat значение), поэтому вы не можете иметь реалистичный куб в IE еще (если только вы возьмите 3D-преобразования, примененные к кубу, и свяжите их перед преобразованиями, примененными для каждой грани, что означает один набор ключевых кадров для каждой грани, если вы хотите оживить куб в целом).

обновление: transform-style: preserve-3d теперь посадки в IE, а также.

Примечание: если вы также применяете 3D-преобразования на .cube, тогда вы должны двигаться perspective свойство на родительском .cube.

2 анимация Куба CSS

это сделано с использованием только обычных анимаций ключевого кадра для .cube элемент. Предположим, вы хотите повернуть его:

@keyframes ani { to { transform: rotate3d(5, 12, 13, 360deg); } }

вы можете иметь несколько кадров, с повороты вокруг разных осей, но это основная идея.

---

TL; DR

просто дай мне чертову демо! Хорошо, вот он:

простой вращающийся куб демо

---

и еще несколько демонстраций, которые я сделал недавно и которые показывают, как создавать другие немного более сложные 3D-формы:

❆ антипризма

❆ кубооктаэдры

❆ rhombicuboctahedron

❆ ромбический додекаэдр

❆ октаэдра

❆ усеченного Куба