Я хотел бы оживить вещи в трехмерном пространстве. я знаю, что это возможно с помощью CSS и HTML5, но я не могу найти хороший учебник для практического использования!
Я нашел этот сайт в качестве примера. Вы можете выбрать текст и т.д. Все время. Может ли кто-нибудь привести очень простой для понимания и небольшой пример, как это работает? Я вижу исходный код, но не совсем понимаю его...
Это CSS3 или HTML5 или оба?
Сколько JavaScript мне нужно?
Какие браузеры поддерживают это?
Все его css3 и javascript. Просто осмотрите сайт в своем любимом инспекторе, выкопайте в дом, и вы увидите что-то вроде
-webkit-perspective: none;
-webkit-perspective-origin: 200px 200px;
-webkit-transform: matrix3d(-0.9386958080415784, -0.197569680458564, 0.2825179663820851, 0, 0, 0.8194947008605812, 0.5730867606754029, 0, -0.34474654452969944, 0.537954139890128, -0.7692562404101148, 0, 0, 0, 0, 1);
-webkit-transform-style: preserve-3d;
-webkit-transition-delay: 0s;
-webkit-transition-duration: 16s;
-webkit-transition-property: all;
-webkit-transition-timing-function: linear;
сколько javascript вам нужно, зависит от того, как вы хотите его реализовать. Это может быть "много" или "немного".
Чем более современный браузер, тем лучше он будет работать хорошо. Проверьте здесь, чтобы узнать, какие браузеры поддерживают что.
Здесь есть две части.
Это действительно старый ответ, и я оставлю суть оригинала ниже, просто удалив ссылки, которые больше не работают.
Но с тех пор, как я написал это, мои возможности кодирования и браузеры улучшились, поэтому, если вы хотите построить куб CSS более эффективным способом, ознакомьтесь с этой статьей, которую я написал по этой теме:
Я подробно рассмотрю каждый из них, но сначала кратко отвечу на три вопроса, которые вы задали в конце.
is this css3 or html5 or both?
Это CSS3. CSS 3D-трансформации и ключевые кадры анимации.
сколько javascript мне нужно?
Что ж, если вы не хотите создавать саму 3D-фигуру с помощью JavaScript, тогда вам не нужен JavaScript для ее анимации. Любой браузер, который поддерживает 3D-преобразования, также поддерживает анимации по ключевым кадрам и, , если браузер поддерживает анимации по ключевым кадрам, вы, вероятно, захотите использовать их вместо jQuery (и, возможно, даже свои собственные). пользовательские JS) анимации.
какие браузеры поддерживают это?
Вещи выглядели не очень хорошо два года назад, но они становятся лучше...
✓ Chrome, Safari, Firefox (хотя 3D-анимация Firefox не очень удобна для моего процессора... У меня есть ноутбук с 6-летней давностью, он true) Opera 15+ (WebKit) поддерживает 3D-преобразования. И, конечно же, анимация ключевых кадров.
Firefox поддерживает все без префиксов, Chrome/Safari/Opera нужен префикс -webkit- - update: Chrome 36+ и Opera 23+ также поддерживают их без префиксов, так что теперь только Safari оставлен. Я не буду использовать префиксы в ответе или в демоверсии (-prefix-free позаботится обо всем там). Еще одно обновление. Преобразование префиксов в Safari 9.
A 3D-преобразования не поддерживались Opera до перехода на WebKit.
✗ IE до 9 включительно не поддерживают 3D-преобразования. IE10 и IE11 поддерживают 3D-преобразования, но не поддерживают вложение 3D-преобразованных элементов (нельзя создавать реалистично выглядящие 3D-формы с помощью применения 3D-преобразований как к родительским, так и дочерним элементам, как к 3D-преобразованным дочерним элементам 3D-трансформированного родителя сплющить в плоскость родителя). Обновление: Edge теперь поддерживает вложение трехмерных преобразованных элементов.
Хорошо, я надеюсь, что это прояснит несколько вещей. Теперь...
Прежде всего, попробуйте изобразить куб. Может быть, эта ссылка поможет? Или пусть здесь тоже будет изображение.
У него 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-преобразований.
Рассмотрим эту трехмерную систему координат:
Изначально все 6 граней находятся именно там, где вы видите синий квадрат, в плоскости xOy (где O - это пересечение 3 осей).
Обратите внимание на направление y-axis. Исходя из математического фона, это сначала показалось мне немного странным, но именно такова система координат для экрана.
В 2D источник O находится в верхнем левом углу, поэтому + (положительное направление) x-axis указывает вправо, а + y-axis указывает вниз.
Таким образом, перевод положительного значения вдоль 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)) перемещает его назад (от вас).
Повороты положительных значений угла (например, rotate(15deg) - обратите внимание, что если ось вращения не указана, то предполагается, что это z-axis) в CSS, это по часовой стрелке, а повороты отрицательных значений угла (как rotate(-15deg)) против часовой стрелки.
И по часовой стрелке означает по часовой стрелке, как видно из + оси, вокруг которой вы вращаете элемент.
Таким образом, положительное вращение вокруг x-axis означает вращение по часовой стрелке в yOz plane, как видно из + в x-axis, который находится справа.
Положительное вращение вокруг y-axis означает вращение по часовой стрелке в zOx plane (горизонтальная плоскость), как видно из + в y-axis, который находится внизу.
Положительное вращение вокруг z-axis означает вращение по часовой стрелке в xOy plane (плоскости экрана), как видно из + в z-axis, то есть как вы видите экран естественным образом.
Это означает перевод его вперед (в положительном направлении) вдоль z-axis. Что это? A translateZ положительного значения. Какое значение? Ну, это должно быть половина width (или height, не имеет значения, это квадрат, они равны).
Предположим, у меня есть width: 16em;
Затем в этом случае вы переводите лицо вперед (вдоль положительного z-axis) с помощью 16em/2 = 8em. В CSS это
.face:nth-child(1) { transform: translateZ(8em); }
Примечание: перевод transform перемещает всю систему координат переводимого элемента (и, следовательно, transform-origin для любых последующих преобразований).
Это так просто, правда? Просто перевод по z-axis, с тем же значением в противоположном направлении, верно? .face:nth-child(2) { transform: translateZ(-8em); }, верно?
Ну... на самом деле... только если вы не хотите наносить контент на это лицо. Или, если вы не хотите иметь в качестве фона изображение, для которого имеет значение, что осталось, а что справа.
Каждый из этих квадратов, составляющих куб, имеет переднюю и заднюю части. Фронт направлен в положительную сторону z-axis; тот, который "смотрит на тебя с экрана компьютера". Если вы поместите туда текст, он будет нормально отображаться на передней панели. Но это выглядит вертикально зеркально на спине.
Поэтому первое, что вы должны сделать, это повернуть вторую квадратную грань на 180 ° вокруг вертикальной оси (y-axis). После этого вы можете перевести эту вторую квадратную грань вдоль z-axis, чтобы переместить ее назад.
Значение перевода в этом случае снова положительное. Точно так же, как translate transform перемещает систему координат переводимого элемента, вращение transform... ну... вращает его. Это означает, что после применения rotateY(180deg) + z-axis указывает назад (больше не вперед).
Таким образом, CSS, который вращается и затем переводит вторую грань в свою позицию на кубе:
.face:nth-child(2) { transform: rotateY(180deg) translateZ(8em); }
Примечание: куб - это действительно простая трехмерная фигура, но одно свойство CSS, которое я считаю действительно полезным для проверки правильности поворота граней, - backface-visibility. Если я установил hidden и не увидел повернутый элемент, это означает, что я смотрю на него сзади.
Прежде всего, его фронт должен "смотреть" вправо. Это означает, что он должен вращаться вокруг y-axis так, чтобы + z-axis в конечном итоге указывал вправо, а затем он должен быть переведен вдоль положительного z-axis на то же положительное значение (8em в данном случае) это половина длины стороны квадрата.
Вращается на какой angular? Ну, 90 °, что означает, что нужно CSS:
.face:nth-child(3) { transform: rotateY(90deg) translateZ(8em); }
Сначала поверните его на 90°, но с другой стороны, чтобы его передняя часть "смотрела" влево. "Другой путь" означает rotateY(-90deg), затем примените тот же самый старый translateZ(8em). В одной строке CSS:
.face:nth-child(4) { transform: rotateY(-90deg) translateZ(8em); }
Сначала поверните его на 90° вокруг x-axis, а затем перемещайте вдоль z-axis (который указывает вверх после вращения). CSS:
.face:nth-child(5) { transform: rotateX(90deg) translateZ(8em); }
Поверните его на 90° в противоположную сторону x-axis, затем переведите его вдоль z-axis (который указывает вниз после поворота). CSS:
.face:nth-child(6) { transform: rotateX(-90deg) translateZ(8em); }
Все грани куба теперь на месте. Но это не будет выглядеть как трехмерная фигура, если лица, которые ближе, кажутся больше, чем те, которые находятся дальше. 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.
Это делается с помощью обычной анимации ключевых кадров для элемента .cube. Допустим, вы хотите повернуть его:
@keyframes ani { to { transform: rotate3d(5, 12, 13, 360deg); } }
У вас может быть несколько ключевых кадров с поворотами вокруг разных осей, но это основная идея.