3D начало CSS3
Чтобы сыграть в 3D CSS3, вы должны понять несколько словарного запаса, а именно перспективы, ротации и перевода. Перспектива означает смотреть на 2D -вещи на экране с реалистичной точки зрения, тем самым показывая эффект 3D. Вращение больше не является вращением на 2D-плоскости, а вращение трехмерной системы координат, включая ось X, ось Y и вращение оси Z. То же самое касается перевода.
Конечно, используя теорию для иллюстрации, вы, вероятно, не понимаете. Вот 3 GIF:
Вращаться вдоль оси X
Вращаться вдоль оси Y
Вращаться вдоль оси Z
Не должно быть никаких проблем с вращением, поэтому легче понять перевод, то есть перемещаться по оси X, оси Y и оси Z.
Вы можете сказать, что перспектива трудно понять. Позвольте мне представить несколько атрибутов перспективы.
перспектива
Английское имя перспективы - перспектива. Без этого нет способа сформировать 3D -эффект. Но как эта вещь позволяет нашему браузеру сформировать 3D -эффект? Вы можете посмотреть на картинку ниже. На самом деле, те, кто изучил живопись, должны знать перспективные отношения, и это причина.
Но в CSS он имеет числовые значения, например, что представляет 1000px? Мы можем понять таким образом, что если мы посмотрим непосредственно на объект, объект будет ошеломляющим и занять наше зрение. Наше расстояние от него становится все больше и меньше, и появится трехмерный смысл. Фактически, это значение создает расстояние между нашими глазами и экраном, которое также создает виртуальную трехмерную иллюзию.
перспектива-аоригин
С вышеперечисленного мы понимаем перспективу и добавляем то, что это за происхождение. Тот, который мы упоминали ранее, - это расстояние от объекта, и это линия зрения глаз. Различные позиции нашей точки зрения определяют различные сцены, которые мы видим. По умолчанию-центр, который является перспективным происхождением: 50% 50%. Первое значение-это ось X, на которой основан трехмерный элемент, а вторая позиция определяется на оси Y.
При определении атрибута перспективного происхождения для элемента его детские элементы получают перспективные эффекты, а не сам элемент. Должен использоваться с атрибутом перспективы и влияет только на элементы трехмерного преобразования. (W3School)
преобразование
Перспектива здесь снова. Да, это ключ к 3D в CSS. Стиль преобразования по умолчанию плоский. Если вы хотите увидеть 3D-эффект на элементы, вы должны использовать стиль Transform: reverve-3D, в противном случае это просто плоское преобразование, а не 3D-преобразование.
Возьмите вас, чтобы поиграть с CSS3-3D шаг за шагом
У нас есть небольшое понимание концепции выше, так что давайте начнем фактический бой ниже!
Давайте посмотрим на эффект, разве это не круто: напрямую посетите https://bupt-hjm.github.io/css3-3d/, если вы думаете, что все в порядке, не забудьте дать его Star HH
Шаг 1: HTML -структура
Очень простой контейнер обернут кусочком, содержащей 6 штук
<div> <div> <div> </div> <div> </div> <div> </div> <div> </div> <div> </div> <div> </div> <div> </div> <div> </div> <div> </div> </div> </div>
Шаг 2: Добавьте необходимые 3D -атрибуты, чтобы войти в 3D World
Благодаря вышеупомянутому объяснению, вы должны быть более знакомы с перспективой.
/*Container*/.container {-webkit -persperive: 1000px; -moz-persperive: 1000px; -ms-persperive: 1000px; Перспектива: 1000px;}/*Производственная коробка*/ .peece-box {перспектива-оригин: 50% 50%; -Вебкит-трансформный стиль: reserve-3d; -Моз-трансформный стиль: reverve-3d; -ms-трансформный стиль: reverve-3d; Стиль преобразования: заповедник-3d;}Шаг 3: Добавьте необходимые стили
/*Container*/.container {-webkit -persperive: 1000px; -moz-persperive: 1000px; -ms-persperive: 1000px; Перспектива: 1000px;}/*Кусок коробки*/. Piece-box {позиция: относительно; Ширина: 200px; Высота: 200px; Маржа: 300px Auto; перспектива-аоригин: 50% 50%; -Вебкит-трансформный стиль: reserve-3d; -Моз-трансформный стиль: reverve-3d; -ms-трансформный стиль: reverve-3d; Transform-Style: PRESERVE-3D;}/*PIECE Общий стиль*/. Piece {Position: Absolute; Ширина: 200px; Высота: 200px; Фон: красный; Непрозрачность: 0.5;}. Piece-1 {founfer: #ff6666;}. Piece-2 {ancome: #fff00;}. Piece-3 {founal: #006699;}. Piece-4 {фон: #009999;}. Piece-5 { #Fack: #ff0033;}. Piece-6 { #fff66;Конечно, после того, как вы завершите этот шаг, вы все еще видите только квадрат, который является нашим пьесом-6, потому что наше 3D-преобразование еще не началось
Шаг 4: 3D Атака преобразования
Первое, что можно осознать вращающийся фонарь. Мы не должны отпускать это в первую очередь, осознавать легкую часть.
Как это достичь? Поскольку для формирования круга круг составляет 360 градусов, и у нас есть 6 штук, то легко думать, что нам нужно повернуть каждую часть с увеличением 60 градусов, и это становится следующим образом
Как вытащить их из центра?
Здесь мы также должны отметить, что после того, как мы поворачиваем элемент вокруг оси Y, ось x и z фактически вращается, поэтому вертикальная линия каждой поверхности куба все еще остается осью z. Нам нужно только изменить значение Translatez. Когда Translatez положительный, мы идем в нашем направлении, чтобы мы могли раздвигать его на части.
Но как измерить расстояние?
Это ясно с первого взгляда?
Давайте изменим CSS
.peece-1 {founale: #ff6666; -Вебкит-трансформ: rotatey (0deg) translatez (173.2px); -ms-transform: rotatey (0deg) translatez (173.2px); -o-transform: rotatey (0deg) translatez (173.2px); преобразование: rotatey (0deg) transtatez (173.2px);}. Piece-2 {founal: #fff00; -Вебкит-трансформ: Rotatey (60Deg) Translatez (173,2PX); -ms-трансформация: Rotatey (60Deg) Translatez (173.2px); -О-трансформирование: Rotatey (60Deg) Translatez (173.2px); преобразование: rotatey (60Deg) Transtatez (173.2px);}. Piece-3 {founal: #006699; -Вебкит-трансформация: Rotatey (120Deg) Translatez (173,2PX); -М-трансформация: Rotatey (120Deg) Translatez (173.2px); -О-трансформирование: Rotatey (120Deg) Translatez (173,2PX); -О-трансформирование: Rotatey (120Deg) Translatez (173,2PX); Преобразование: Rotatey (120Deg) Transtatez (173.2px);}. Piece-4 {founale: #009999; -Вебкит-трансформ: Ротати (180deg) Translatez (173.2px); -М-трансформация: Rotatey (180Deg) Translatez (173,2PX); -О-трансформирование: Ротатей (180deg) Translatez (173.2px); Преобразование: Rotatey (180Deg) Translatez (173.2px);}. Piece-5 {founal: #ff0033; -Вебкит-трансформ: Rotatey (240Deg) Translatez (173,2PX); -ms-трансформация: Rotatey (240Deg) Translatez (173,2PX); -О-трансформирование: Rotatey (240Deg) Translatez (173,2PX); Преобразование: Rotatey (240Deg) Transtatez (173.2px);}. Piece-6 {founal: #ff6600; -Вебкит-трансформ: Rotatey (300Deg) Translatez (173,2PX); -М-трансформация: Rotatey (300Deg) Translatez (173,2PX); -О-трансформирование: Rotatey (300Deg) Translatez (173.2px); Преобразование: Rotatey (300Deg) Translatez (173.2px);}Был реализован вращающийся фонарь?
Шаг 5: Анимация делает 3D -ход
Чтобы достичь движущегося фонаря, это на самом деле очень просто. Нам просто нужно добавить анимацию ротации в кусочек. Заполните анимацию за 5 секунд, поверните от 0 градусов до 360 градусов
/*Кусок коробки*/. Piece-box {позиция: относительно; Ширина: 200px; Высота: 200px; Маржа: 300px Auto; перспектива-аоригин: 50% 50%; -Вебкит-трансформный стиль: reserve-3d; -Моз-трансформный стиль: reverve-3d; -ms-трансформный стиль: reverve-3d; Стиль преобразования: заповедник-3D; Анимация: поделка 5 с; -Моз-анимация: Pieceratate 5s; / * Firefox */ -Webkit -Animation: Pieceratate 5s; / * Safari и Chrome */ - -ANIMATION: PICEROTATE 5S; /*Opera*/}/*Анимация революционной лампы*/@keyframes Piecerotate {0% {-webkit-transform: rotatey (0deg); -ms-transform: rotatey (0deg); -o-transform: rotatey (0deg); Transform: rotatey (0deg);} 100% {-webkit-transform: utatey (360deg); -ms-трансформация: Rotatey (360Deg); -О-трансформирование: rotatey (360deg); Transform: rotatey (360deg);}}/ * firefox */@-moz-keyframes piecerotate {0% {-webkit-transform: rotatey (0deg); -ms-transform: rotatey (0deg); -o-transform: rotatey (0deg); Transform: rotatey (0deg);} 100% {-webkit-transform: utatey (360deg); -ms-трансформация: Rotatey (360Deg); -О-трансформирование: rotatey (360deg); Transform: rotatey (360deg);}}/ * Safari и Chrome */@-webkit-keyframes piecerotate {0% {-webkit-transform: rotatey (0deg); -ms-transform: rotatey (0deg); -o-transform: rotatey (0deg); Transform: rotatey (0deg);} 100% {-webkit-transform: utatey (360deg); -ms-трансформация: Rotatey (360Deg); -О-трансформирование: rotatey (360deg); Transform: rotatey (360deg);}}/ * Opera */@-O-keyFrames Piecerotate {0% {-webkit-Transform: rotatey (0deg); -ms-transform: rotatey (0deg); -o-transform: rotatey (0deg); Transform: rotatey (0deg);} 100% {-webkit-transform: utatey (360deg); -ms-трансформация: Rotatey (360Deg); -О-трансформирование: rotatey (360deg); преобразование: rotatey (360deg);}}Я не становлю здесь GIF ~ HHH достигает крутых эффектов? Еще не закончилось ~ более крутой кубической сборки
На самом деле не сложно внедрить куб. Я не буду вдаваться в подробности здесь. Сначала вы можете представить себе лицо, а затем расширить другие лица для его реализации. Например, мы поместили передний перевод (100px) куба рядом с нашим 100px, а затем переводяк (-100px), а затем перемещаем его от нашего 100px. Слева находится Transtatex (-100px, затем вращающийся (90deg), справа-Transtatex (100px), а затем Rotatey (90deg), сверху transtatey (-100px), rowatex (90deg), на дне транслирует (100px), rowtatex (90deg), и на дно. (90deg).
CSS выглядит следующим образом. Следующее - только часть1. Другие читатели могут реализовать его сами по себе или посмотреть на мой исходный код GitHub
.peece-1 {founale: #ff6666; -Вебкит-трансформ: rotatey (0deg) translatez (173.2px); -ms-transform: rotatey (0deg) translatez (173.2px); -o-transform: rotatey (0deg) translatez (173.2px); преобразование: rotatey (0deg) translatez (173.2px); Анимация: Piece1tate 5S 5S; -Моз-анимация: Piece1tate 5S 5S; / * Firefox */ -Webkit -Animation: Piece1taTe 5S 5S; / * Safari и Chrome */ - -ANIMATION: Piece1taTe 5S 5S; / * Opera */ -Webkit-ANIMATION-FILL-MODE: Worths; / * Chrome, Safari, Opera */ Animation-Fill-Mode: Worths; }/*front*/ @keyframes piece1rotate {0% {-webkit-transform: rotatey (0deg) transtatez (173.2px); -ms-transform: rotatey (0deg) translatez (173.2px); -o-transform: rotatey (0deg) translatez (173.2px); преобразование: rotatey (0deg) transtatez (173.2px);} 100% {-webkit-transform: rotatey (0deg) transtatez (100px); -ms-transform: rotatey (0deg) translatez (100px); -o-transform: rotatey (0deg) translatez (100px); Transform: rotatey (0deg) transtatez (100px);}} / * firefox * / @-moz-keyframes piece1rotate {0% {-webkit-transform: rotatey (0deg) transtatez (100px);}} / * firefox * / @ @@moz-keeframe piece1rotate {0% {-вет. Rotatey (0DEG) Translatez (173,2PX); -ms-transform: rotatey (0deg) translatez (173.2px); -o-transform: rotatey (0deg) translatez (173.2px); преобразование: rotatey (0deg) transtatez (173.2px);} 100% {-webkit-transform: rotatey (0deg) transtatez (100px); -ms-transform: rotatey (0deg) translatez (100px); -o-transform: rotatey (0deg) translatez (100px); -o-transform: rotatey (0deg) translatez (100px); преобразование: rotatey (0deg) translatez (100px); преобразование: rotatey (0deg) translatez (100px); transtatez (100px);}} / * safari и chrome * / @-webkit-keyframes piece1rotate {0% {-webkit-transform: rotatey (0deg) transtatez (173.2px); -ms-transform: rotatey (0deg) translatez (173.2px); -o-transform: rotatey (0deg) translatez (173.2px); преобразование: rotatey (0deg) transtatez (173.2px);} 100% {-webkit-transform: rotatey (0deg) transtatez (100px); -ms-transform: rotatey (0deg) translatez (100px); -o-transform: rotatey (0deg) translatez (100px); преобразование: rotatey (0deg) transtatez (100px);}} / * opera * / @-o-keyframes piece1rotate {0% {-webkit-transform: rotatey (0deg) transtatez (173.2px); -ms-transform: rotatey (0deg) translatez (173.2px); -o-transform: rotatey (0deg) translatez (173.2px); -o-transform: rotatey (0deg) translatez (173.2px); преобразование: rotatey (0deg) transtatez (173.2px);} 100% {-webkit-transform: rotatey (0deg) transtatez (100px); -ms-transform: rotatey (0deg) translatez (100px); -o-transform: rotatey (0deg) translatez (100px); -o-transform: rotatey (0deg) translatez (100px); преобразование: rotatey (0deg) transtatez (100px);}}Осторожные читатели могут обнаружить, что я использовал режим заполнения анимации: вперед; Читатели могут попробовать это, не попробовав, и он все равно будет восстановлен в своем первоначальном состоянии.
Наконец, куб вращается. Наш контейнер впереди уже использовал анимацию. Читатели могут подумать, что я могу добавить класс и положить аниматун. HHH, Animaiton рассмотрит фронт, и анимация переднего фонаря исчезнет. Итак, в структуре HTML я добавил еще одну обертоку коробки, следующим образом
<div> <div> <div> <!-новый контейнер-> <div> </div> <div> </div> <div> </div> <div> </div> <div> </div> <div> </div> <div> </div> <div> </div> <div> </div> </div> </div> </div> </div> </div> </div> </div> </div>
В анимации мы можем контролировать время задержки анимации куба, то есть подождите, пока сборка куба не будет завершена перед началом анимации
Анимация: Boxrotate 5s 10s Infinite; Первые 5S - это продолжительность анимации, второй 10S - это время задержки, а затем мы позволяем кубу вращаться, от 0 градусов до 360 градусов вокруг оси x, а также от 0 до 360 градусов вокруг оси Y.
.peece-box2 {-webkit-transform-style: reverve-3d; -Моз-трансформный стиль: reverve-3d; -ms-трансформный стиль: reverve-3d; Стиль преобразования: заповедник-3D; Анимация: Boxrotate 5s 10s Infinite; -Моз-анимация: Boxrotate 5S 10S Infinite; / * Firefox */ -Webkit -Animation: Boxrotate 5s 10s Infinite; / * Safari и Chrome */ - -анимация: Boxrotate 5s 10s Infinite; /*Opera*/}/*Анимация Cuboid atation*/@keyframes boxrotate {0% {-webkit-transform: rotatex (0deg) rotatey (0deg);); -ms-transform: rotatex (0deg) rotatey (0deg);); -o-transform: rotatex (0deg) rotatey (0deg););); преобразование: rotatex (0deg) rotatey (0deg);););} 100% {-webkit-transform: rotatex (360deg) rotatey (360deg); -ms-трансформация: rotatex (360deg) rotatey (360deg); -О-трансформирование: rotatex (360deg) rotatey (360deg); преобразование: rotatex (360deg) rotatey (360deg);}}/ * firefox */@-moz-keyframes boxrotate {0% {-webkit-transform: rotatex (0deg) rotatey (0deg);); -ms-transform: rotatex (0deg) rotatey (0deg);); -o-transform: rotatex (0deg) rotatey (0deg););); преобразование: rotatex (0deg) rotatey (0deg);););} 100% {-webkit-transform: rotatex (360deg) rotatey (360deg); -ms-трансформация: rotatex (360deg) rotatey (360deg); -О-трансформирование: rotatex (360deg) rotatey (360deg); преобразование: rotatex (360deg) rotatey (360deg);}}/ * safari и chrome */@-webkit-keyframes boxrotate {0% {-webkit-transform: rotatex (0deg) rotatey (0deg);); -ms-transform: rotatex (0deg) rotatey (0deg);); -o-transform: rotatex (0deg) rotatey (0deg);); rotatex (0deg) rotatey (0deg);); преобразование: rotatex (0deg) rotatey (0deg););} 100% {-webkit-transform: rotatex (360deg) rotatey (360deg); -ms-трансформация: rotatex (360deg) rotatey (360deg); -О-трансформирование: rotatex (360deg) rotatey (360deg); преобразование: rotatex (360Deg) rotatey (360Deg);}}/ * Opera */@-O-KeyFrames boxRotate {0% {-webkit-transform: rotatex (0deg) rotatey (0deg);); -ms-transform: rotatex (0deg) rotatey (0deg);); -o-transform: rotatex (0deg) rotatey (0deg);); преобразование: rotatex (0deg) rotatey (0deg);););} 100% {-webkit-transform: rotatex (360deg) rotatey (360deg); -ms-трансформация: rotatex (360deg) rotatey (360deg); -О-трансформирование: rotatex (360deg) rotatey (360deg); преобразование: rotatex (360deg) rotatey (360deg);}}Последний эффект завершен!
Вышеупомянутые примеры реализации CSS 3D. Нуждающиеся студенты могут ссылаться на это. Спасибо за поддержку этого сайта!