Это две части.
- Первая о построении трехмерной фигуры.
- Вторая включает анимацию это (и это простая часть).
Я подробно рассмотрю каждый из них, но сначала я кратко отвечу на три вопроса, которые вы задали в конце.
это css3 или html5 или оба?
Это CSS3.CSS 3D-преобразования и анимации ключевых кадров .
сколько мне нужно JavaScript?
Что ж, если вы не хотите создавать саму 3D-фигуру с помощью JavaScript, вам не нужен JavaScript для ее анимации.Любой браузер, который поддерживает 3D-преобразования , также поддерживает анимации ключевых кадров и , если браузер поддерживает анимации ключевых кадров, то вы, вероятно, захотите использовать их вместо jQuery (и, возможно,даже ваши собственные пользовательские анимации JS .
какие браузеры поддерживают это?
Вещи выглядели не очень хорошо два года назад, но они 'становится лучше ...
✓ Chrome , Safari , Firefox (хотя анимация Firefox 3D покачивается и не нравится моему процессору... У меня есть 6-летний ноутбук, это правда) Opera 15+ (WebKit) поддерживает 3D-преобразования.И, конечно же, анимация ключевых кадров.
Firefox поддерживает все без префиксов, Chrome / Safari / Opera нужен префикс -webkit- - update : Chrome 36+ и Opera 23+ также поддерживают их без префиксов,так что теперь осталось только Safari.Я не буду использовать префиксы в ответе или в демоверсии (-prefix-free позаботится там о вещах). Еще одно обновление : Преобразования префиксов Safari 9.
✗ 3D-преобразования не поддерживались Opera до перехода на WebKit.
✗ IE вплоть до 9 * 1078 включительно не поддерживает 3D-преобразования. IE10 и IE11 поддерживают 3D-преобразования, но не поддерживают вложение 3D-преобразованных элементов (невозможно создать реалистично выглядящие 3D-формы с помощью применения 3D-преобразований для родительского и дочернего элементовэлементы, поскольку 3D-преобразованные дочерние элементы 3D-преобразованного родительского элемента сглаживаются в плоскости родительского элемента). Обновление : Edge теперь поддерживает вложение трехмерных преобразованных элементов.
Хорошо, надеюсь, это прояснит некоторые вещи.Теперь ...
1 Создание куба CSS.
1.2 Что такое куб и начинается с HTML
Прежде всего, попробуйте изобразить куб.Может быть эта ссылка помогает?Или давайте также получим изображение здесь.
У него 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, располагаете их абсолютно так, чтобы они 'все они сложены друг на друга, дают им различное происхождение, они не против этого.Вы можете дать им немного отступов, вставить в них какой-нибудь фиктивный текст, что угодно ...
Теперь самое интересное: переместить их так, чтобы они образовали куб в пространстве.Это делается с помощью трехмерных преобразований.
1.2 Система координат
Рассмотрим эту трехмерную систему координат:
Первоначально все 6 гранейвсе именно там, где вы видите синий квадрат, в плоскости xOy (где O - пересечение трех осей).
Обратите внимание на направление y-axis.Исходя из математического фона, на первый взгляд это показалось мне немного странным, но такова система координат экрана.
В 2D начало координат O находится в верхнем левом углу, поэтому+ (положительное направление) x-axis указывает вправо и + y-axis указывает вниз.
1.2.a Переводы по осям
Таким образом, перевод положительного значения вдоль x-axis (например, translateX(10px)) перемещает элемент, к которому оно применяется, вправо (к + из x-axis), в то время как перевод отрицательного значениязначение вдоль x-axis (что-то вроде translateX(-10px)) перемещает его влево.
Аналогично, перевод положительного значения вдоль y-axis (например, translateY(10px)) перемещает элемент вниз (в направлении+ y-axis), в то время как перевод отрицательного значения вдоль y-axis (например, translateY(-10px)) перемещает его вверх.
Теперь добавьте другое измерение.С z-axis.+ (положительное направление) z-axis выходит из экрана к вам.Таким образом, перевод положительного значения вдоль z-axis (например, translateZ(10px)) перемещает элемент вперед (к + z-axis и к вам), в то время как перевод отрицательного значения вдоль z-axis(как translateZ(-10px)) перемещает его назад (от вас).
1.2.b Повороты вокруг осей
Повороты положительных угловых значений (например, rotate(15deg) - обратите внимание, что еслиось вращения не указана, то предполагается, что в CSS * z-axis) по часовой стрелке, а вращения отрицательных значений угла (например, rotate(-15deg)) - против часовой стрелки.
И по часовой стрелке означает, что по часовой стрелкевидно из + оси, вокруг которой вы вращаете элемент.
Таким образом, положительное вращение вокруг x-axis означает вращение по часовой стрелке в yOz plane, как видно из + x-axis, который находится справа.
Положительное вращение вокруг y-axis означает вращение по часовой стрелке в zOx plane (горизонтальная плоскость), как видно из + y-axis,который находится внизу.
Положительное вращение вокруг z-axis означает вращение по часовой стрелке в xOy plane (плоскости экрана), как видно из + z-axis, то есть то, как вы естественным образом видите экран.
1.3 Поместите грани в правильные положения, чтобы сформировать куб
1.3.1 Поместите одну грань на перед
Это означаетпереводя его вперед (в положительном направлении) вдоль z-axis.Что это?A translateZ положительного значения.Какое значение?Ну, это должно быть половина width (или height, не имеет значения, это квадрат, они равны).
Предположим, у меня есть width: 16em;
Тогда в этом случае вы переводите лицо вперед (вдоль положительного z-axis) на 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); }
Примечание : куб - это действительно простая трехмерная фигура, но один 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 Перспективные и реалистичные трехмерные фигуры
Все грани куба теперь на месте.Но это не будет выглядеть как трехмерная фигура, если лица, которые ближе, кажутся больше, чем те, которые находятся дальше.Свойство CSS, которое заботится об этом, называется perspective и применяется к родителю элементов, к которым применены 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
Просто дай мне чертово демо!Хорошо, вот оно:
И еще несколько демонстраций, которые я недавно сделал и которые показывают, как создавать другие, немного большесложные трехмерные фигуры:
❆ квадратная антипризма
❆ кубоктаэдр
❆ ромбикубоктаэдр
❆ ромбический додекаэдр
❆ октаэдр
❆ усеченный куб