Комментарий: я прочитал статью о том, как использовать CSS3 для создания 3D тетраэдров. Я думал, что это было довольно хорошо, поэтому я взял его и поделился с вами, как использовать Div+CSS для создания треугольников. Здесь я сначала вставлю соответствующий код, а затем объясню вам принцип
Сегодня я прочитал статью о том, как использовать CSS3 для создания 3D тетраэдров. Я думал, что это было довольно хорошо, поэтому я вытащил его и поделился с вами.Первое, что я хочу поделиться с вами, это то, как использовать Div+CSS для создания треугольников. Здесь я сначала вставлю соответствующий код, а затем объясню вам принципы.
HTML:
<div>
<div> </div>
</div>
CSS:
<стиль типа = "text/css">
#pyramid {
позиция: относительно;
Маржа: 100px Auto;
Высота: 500px;
Ширина: 100px;
}
#pyramid> div {
позиция: абсолютно;
пограничный стиль: твердый;
ширина границы: 200px 0 200px 346px;
}
#pyramid> div: после {
позиция: абсолютно;
Содержание: «Треугольник»;
Цвет: #ffff;
слева: -250px;
Текст-альбом: Центр;
}
#pyramid> div: первый ребенок {
Пограничный цвет: #FF0000 прозрачный #FF0000 RGBA (50, 50, 50, 0,6);
}
</style>
Эффект бега:
Принцип анализа:
В коде HTML мы определяем два DIV, внешний Div является контейнерным объектом, а внутренний Div используется для генерации треугольников. В коде CSS мы не устанавливаем ширину и высоту для внутреннего DIV, а только устанавливаем ширину трех краев границы (верхняя, вниз и слева). Установив разные цвета для трех сторон, они станут тремя разными треугольниками соответственно.
В настоящее время нам просто нужно просто установить цвета на верхних и нижних сторонах на прозрачные цвета, и появится равносторонний треугольник.
#pyramid> div: первый ребенок {
Пограничный цвет: прозрачный прозрачный прозрачный RGBA (50, 50, 50, 0,6);
}
Изображение воспроизведения:
Среди них место, показанное в красном круге, где находится внутренний див. Он невидимый объект с 0 шириной и 0 высотой, но на самом деле существует.
Далее мы поговорим о том, как реализовать 3D тетраэдров и как создавать анимацию.
Во -первых, вставьте соответствующий код.
HTML:
<div>
<div> </div>
<div> </div>
<div> </div>
<div> </div>
</div>
CSS:
<стиль типа = "text/css">
#pyramid {
позиция: относительно;
Маржа: 100px Auto;
Высота: 500px;
Ширина: 100px;
-Вебкит-трансформный стиль: reserve-3d;
-Вебкит-анимация: Spin 10s Linear Infinite;
-Вебкит-трансформ-аоригин: 116px 200px 116px;
-Моз-трансформный стиль: reverve-3d;
-Моз-анимация: Spin 10s Linear Infinite;
-Моз-трансформ-аоригин: 116px 200px 116px;
-ms-трансформный стиль: reverve-3d;
-ms-анимация: Spin 10s Linear Infinite;
-М-трансформ-аоригин: 116px 200px 116px;
Стиль преобразования: заповедник-3D;
Анимация: Spin 10s Linear Infinite;
преобразование-аоригин: 116px 200px 116px;
}
@-webkit-keyframes spin {
от {
-Webkit-transform: rotatex (0deg) rotatey (0deg) rotatez (0deg);
}
к {
-Webkit-Transform: Rotatex (360DEG) ROTATEY (360DEG) ROTATEZ (360DEG);
}
}
@-moz-keyframes spin {
от {
-Моз-трансформ: rotatex (0deg) rotatey (0deg) rotatez (0deg);
}
к {
-Моз-трансформ: Rotatex (360DEG) ROTATEY (360DEG) ROTATEZ (360DEG);
}
}
@-ms-keyframes spin {
от {
-ms-transform: rotatex (0deg) rotatey (0deg) rotatez (0deg);
}
к {
-ms-трансформация: rowatex (360deg) rotatey (360deg) Rotatez (360deg);
}
}
@keyframes spin {
от {
преобразование: rotatex (0deg) rotatey (0deg) rotatez (0deg);
}
к {
Преобразование: Rotatex (360DEG) ROTATEY (360DEG) ROTATEZ (360DEG);
}
}
#pyramid> div {
позиция: абсолютно;
пограничный стиль: твердый;
ширина границы: 200px 0 200px 346px;
-Вебкит-трансформ-аоригин: 0 0;
-Моз-трансформ-аоригин: 0 0;
-ms-transform-origin: 0 0;
преобразование-аоригин: 0 0;
}
#pyramid> div: после {
позиция: абсолютно;
Содержание: «Треугольник»;
Цвет: #ffff;
слева: -250px;
Текст-альбом: Центр;
}
#pyramid> div: первый ребенок {
Пограничный цвет: прозрачный прозрачный прозрачный RGBA (50, 50, 50, 0,6);
-Вебкит-трансформ: rowatey (-19.5Deg) rotatex (180deg) Translatey (-400px);
-Моз-трансформ: Rotatey (-19.5DEG) ROTATEX (180DEG) Translatey (-400PX);
-ms-трансформация: rotatey (-19.5Deg) rotatex (180Deg) Translatey (-400px);
преобразование: rotatey (-19.5Deg) rotatex (180deg) Translatey (-400px);
}
#pyramid> div: nth-child (2) {
Пограничный цвет: прозрачный прозрачный прозрачный RGBA (50, 50, 50, 0,6);
-Вебкит-трансформы: rowatey (90deg) Rotatez (60Deg) Rotatex (180Deg) Translatey (-400px);
-Моз-трансформ: Rotatey (90Deg) Rotatez (60Deg) Rotatex (180Deg) Translatey (-400px);
-Сс-трансформы: rowatey (90deg) rotatez (60deg) rotatex (180deg) translatey (-400px);
Преобразование: Rotatey (90DEG) ROTATEZ (60DEG) ROTATEX (180DEG) TRANSTATE (-400PX);
}
#pyramid> div: nth-child (3) {
Пограничный цвет: прозрачный прозрачный прозрачный RGBA (50, 50, 50, 0,9);
-Вебкит-трансформы: rotatex (60deg) rotatey (19,5deg);
-Моз-трансформ: Rotatex (60DEG) ROTATEY (19,5DEG);
-ms-трансформация: rotatex (60deg) rotatey (19,5deg);
Преобразование: Rotatex (60DEG) ROTATEY (19,5DEG);
}
#pyramid> div: nth-child (4) {
Пограничный цвет: прозрачный прозрачный прозрачный RGBA (50, 50, 50, 0,8);
-Webkit-transform: rotatex (-60deg) rotatey (19,5deg) transtatex (-116px) transtatey (-200px) transtatez (326px);
-Моз-трансформ: rotatex (-60deg) rotatey (19,5deg) transtatex (-116px) transtatey (-200px) transtatez (326px);
-ms-transform: rotatex (-60deg) rotatey (19,5deg) translatex (-116px) transtatey (-200px) transtatez (326px);
преобразование: rotatex (-60deg) rotatey (19,5deg) transtatex (-116px) Transtatey (-200px) Transtatez (326px);
}
</style>
Теперь начните объяснять соответствующий код.
HTML -код аналогичен предыдущему, что состоит в том, что существует три дополнительных DIV, которые используются в качестве трех сторон тетраэдра.
В коде CSS мы используем #pyramid> div: Nth-Child (n), чтобы найти четыре лица триэдрона, устанавливать цвета четырех сторон границы и определять их на треугольники соответственно. Установите их угол, ориентацию и положение в трехмерном пространстве через методы атрибута Transform Rotatex, Rotatey, Transtatex, Transtatey и Transtatez. Это включает в себя много математических знаний, и каждый должен дополнить соответствующие знания.
Благодаря вышеупомянутой договоренности образуется тетраэдр. Далее следует добавить в него эффекты анимации. Вещи, используемые здесь, также очень просты, а именно анимация и ключевые кадры. Вы можете изучить свойства, связанные с CSS3 на сайте, поэтому я не буду слишком много объяснять здесь.
На этом этапе в этой статье вы можете вставить код HTML и CSS вместе, чтобы увидеть окончательный эффект.
В коде есть что -то, чего вы не понимаете, так что вы можете оставить мне сообщение.