«Внешняя сводка боя» с использованием CSS3 для создания крутой вращающейся 3D-перспективы.

внешний интерфейс CSS
«Внешняя сводка боя» с использованием CSS3 для создания крутой вращающейся 3D-перспективы.

Эффекты 3D-анимации в настоящее время становятся все более популярными и широко применяются на различных платформах, таких как Alibaba Cloud, Huawei Cloud, официальный веб-сайт webpack и т. д. Это может быть ближе к реальному показу наших продуктов и представлений, создавая сильное визуальное впечатление. Поэтому для того, чтобы стать лучше, необходима 3D-анимация CSS3.

ты выучишь

  • Введение в распространенные API для преобразования CSS3 в 3D
  • Сценарии применения CSS3 3D
  • CSS3 3D реализует куб

Начинать

1. Введение в распространенные API для преобразования CSS3 в 3D.

Во-первых, система координат предыдущего CSS 3D:

Далее давайте представим некоторые часто используемые API:

вращать
  • rotateX()
  • rotateY()
  • повернутьZ() Вышеупомянутые API-интерфейсы представляют вращение вокруг осей X, Y и Z соответственно. Следующий пример является примером вращения вокруг оси X:

Соответствующий код выглядит следующим образом:

<style>
.d3-wrap {
    position: relative;
    width: 300px;
    height: 300px;
    margin: 120px auto;
    /* 规定如何在 3D 空间中呈现被嵌套的元素 */
    transform-style: preserve-3d;
    transform: rotateX(0) rotateY(45deg);
    transform-origin: 150px 150px 150px;
}

.rotateX {
    width: 200px;
    height: 200px;
    background-color: #06c;
    transition: transform 2s;
    animation: rotateX 6s infinite;
}

@keyframes rotateX {
    0% {
        transform: rotateX(0);
    }
    100% {
        transform: rotateX(360deg);
    } 
}
</style>
<div class="d3-wrap">
    <div class="rotateX"></div>
</div>
Смещение (преобразование)
  • translateX(x) определяет 3D-перевод, используя только значение, используемое для оси X.
  • translateY(y) определяет 3D-перевод, используя только значение, используемое для оси Y.
  • translateZ(z) определяет трехмерное перемещение, используя только значение, используемое для оси Z. Приведенные выше API-интерфейсы представляют смещение относительно осей X, Y и Z соответственно. Следующий пример является примером смещения по оси Z:

Здесь нам нужно обратить внимание на то, что для того, чтобы увидеть эффект смещения, нам нужно добавить следующие свойства к родительскому контейнеру:

.d3-wrap {
    transform-style: preserve-3d;
    perspective: 500;
    /* 设置元素被查看位置的视图 */
    -webkit-perspective: 500;
}

Когда свойство перспективы определено для элемента, его дочерние элементы получают эффект перспективы, а не сам элемент. код показывает, как показано ниже:

.d3-wrap {
    position: relative;
    width: 300px;
    height: 300px;
    margin: 120px auto;
    transform-style: preserve-3d;
    perspective: 500;
    -webkit-perspective: 500;
    transform: rotateX(0) rotateY(45deg);
    transform-origin: center center;
}

.transformZ {
    width: 200px;
    height: 200px;
    background-color: #06c;
    transition: transform 2s;
    animation: transformZ 6s infinite;
}

@keyframes transformZ {
    0% {
        transform: translateZ(100px);
    }
    100% {
        transform: translateZ(0);
    } 
}
3D-зум
  • scaleX(x) дает значение преобразования трехмерного масштаба для оси X.
  • scaleY(x) дает значение преобразования трехмерного масштаба для оси Y.
  • scaleZ(x) дает значение преобразования масштаба 3D для оси Z. Настройки масштабирования аналогичны приведенным выше, поэтому я не буду вдаваться в подробности.

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

2. Сценарии применения CSS3 3D

CSS 3D в основном используется для взаимодействия с веб-сайтом и эффектов модели, таких как:

  • 3D карусель
  • Представление 3D-продукта
  • Внутреннее 3D-моделирование
  • h5 3D-страница активности, типичная — сводка на конец года H5 Taobao за определенный год.
  • 3D визуализация данных в виде графиков
  • Схема 3D модели На самом деле, если вы знакомы с CSS 3D, некоторые базовые 3D-модели можно нарисовать с помощью CSS.

3. CSS3 3D реализует куб

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

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

.container {
    position: relative;
    width: 300px;
    height: 300px;
    margin: 120px auto;
    transform-style: preserve-3d;
    /* 为了让其更有立体效果 */
    transform: rotateX(-30deg) rotateY(45deg);
    transform-origin: 150px 150px 150px;
    animation: rotate 6s infinite;
}
.container .page {
    position: absolute;
    width: 300px;
    height: 300px;
    text-align: center;
    line-height: 300px;
    color: #fff;
    background-size: cover;
}
.container .page:first-child {
    background-image: url(./my.jpeg);
    background-color: rgba(0,0,0,.2);
}
.container .page:nth-child(2) {
    transform: rotateX(90deg);
    transform-origin: 0 0;
    transition: transform 10s;
    background-color: rgba(179, 15, 64, 0.6);
    background-image: url(./my2.jpeg);
}

.container .page:nth-child(3) {
    transform: translateZ(300px);
    background-color: rgba(22, 160, 137, 0.7);
    background-image: url(./my3.jpeg);
}

.container .page:nth-child(4) {
    transform: rotateX(-90deg);
    transform-origin: -300px 300px;
    background-color: rgba(210, 212, 56, 0.2);
    background-image: url(./my4.jpeg);
}
.container .page:nth-child(5) {
    transform: rotateY(-90deg);
    transform-origin: 0 0;
    background-color: rgba(201, 23, 23, 0.6);
    background-image: url(./my5.jpeg);
}
.container .page:nth-child(6) {
    transform: rotateY(-90deg) translateZ(-300px);
    transform-origin: 0 300px;
    background-color: rgba(16, 149, 182, 0.2);
    background-image: url(./my6.jpeg);
}

HTML-структура

<div class="container">
    <div class="page">A</div>
    <div class="page">B</div>
    <div class="page">C</div>
    <div class="page">D</div>
    <div class="page">E</div>
    <div class="page">F</div>
</div>

расширять

Основываясь на вышеизложенном, мы можем добавить анимацию или эффекты перетаскивания к родительскому элементу, чтобы мы могли создавать более интерактивные 3D-блоки, такие какустановить игру в кости,вр сцена,3D АльбомПодождите, я найду время, чтобы обобщить конкретную реализацию, не забудьте обратить внимание~

наконец

Если вы хотите узнать больше о внешних интерфейсах и реальных боевых действиях, таких как webpack, node, gulp, css3, javascript, nodeJS, canvas и т. д., присоединяйтесь к нам в общедоступной учетной записи «Интересный интерфейс», чтобы узнать и обсудить вместе и исследовать границы интерфейса вместе.

больше рекомендаций

Категории