Очарование css3D

Предисловие:

Недавно я экспериментировал с CSS для создания 3D-эффектов и написал несколько демонстраций, поэтому в блоге они подведены итоги. Прежде чем читать этот блог, пожалуйста, ознакомьтесь со свойствами CSS 3D, такими как: стиль трансформации, происхождение трансформации, трансформация, перспектива.

demo1

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

​

1. Сначала реализуем кубоид на css, у кубоида 6 сторон, пишем 6 div и оборачиваем их в div

<div class="cube-box">
    <div class="cube1 cube"></div>
    <div class="cube2 cube"></div>
    <div class="cube3 cube"></div>
    <div class="cube4 cube"></div>
    <div class="cube5 cube"></div>
    <div class="cube6 cube"></div>
</div>

2. Задайте ширину и высоту .cube-box и атрибут save-3d, чтобы сохранить 3D-преобразование подэлементов, а все подэлементы .cube абсолютно позиционированы.

.cube-box{
    transform-style: preserve-3d;
    width: 30px;
    height: 100px;
    position: relative;
}
.cube{
    position: absolute;
    left: 0;
    top: 0;
}

3. Сначала напишите face.cube1, ширина и высота на 100% равны ширине и высоте родительского элемента, цвет фона красный, код и эффект следующие

.cube1{
    width: 100%;
    height: 100%;
    background: red;
}

4. Чтобы облегчить нам просмотр трехмерного эффекта позже, теперь мы поворачиваем родительский элемент и добавляем следующий код, эффект выглядит следующим образом.

.cube-box{
    transform: rotateX(-30deg) rotateY(45deg);
}

5. .cube1 используется в качестве первого элемента, нам не нужно его вращать, он используется как поверхность по умолчанию, теперь сращиваем вторую поверхность .cube2, согласно написанию .cube1, но мы устанавливаем его в зеленый цвет , эффект следующий, .cube2 перекрывается .cube1, поэтому нам тоже нужно вращать .cube2

.cube2{
    width: 100%;
    height: 100%;
    background: green;
}

6. Теперь попробуем повернуть .cube2, получится следующий эффект. Направление вращения здесь не объясняется.Друзья, которые не понимают, могут сами проверить другие документы.

.cube2{
    width: 100%;
    height: 100%;
    background: green;
    transform: rotateY(-90deg);
}

7. Переместите его с помощью translate3d. Эффект такой, как показано ниже, хер хер. Но вот проблема.Код здесь недостаточно гибкий.Величину translate нужно вычислять вручную.Сейчас ширина 30px,и половину нужно сдвинуть на 15px для склейки.Это значение нужно вычислить и написано вручную или рассчитано с помощью js в то время, что слишком мало. Я надеюсь, что мне нужно использовать js только для динамической установки ширины и высоты родительского элемента .cube-box в соответствии с внутренними данными, и все дочерние элементы будут самоадаптирующимися, так что их лучше использовать.

.cube2{
    width: 100%;
    height: 100%;
    background: green;
    transform: rotateY(-90deg) translate3d(15px,0,15px);
}

8. Итак, теперь мы должны использовать другое свойство transform-origin, которое по умолчанию равно «center center 0;» или «50% 50% 0;», поэтому на шаге 6 мы вращаем .cube2. Time — это вращение в соответствии с положением. посередине самого себя.Преобразуем его и зададим положение преобразования с левой стороны элемента, что тоже дает тот же эффект, но код проще.

.cube2{
    width: 100%;
    height: 100%;
    background: green;
    transform-origin: left top;
    transform: rotateY(-90deg);
}

9. По методу .cube2 вращаем .cube3 таким же образом, и устанавливаем синий цвет, эффект следующий

.cube3{
    width: 100%;
    height: 100%;
    background: blue;
    transform-origin: right top;
    transform: rotateY(90deg);
}

10. .cube4 немного отличается, следующую поверхность не нужно вращать, просто переместите .cube1 в направлении оси Z на 30 пикселей в ширину, оси X и Y могут использовать ширину и высоту в качестве основы для установки процента , например, ширина равна 20 пикселей, если вы хотите переместить ось X на 20 пикселей, вы можете установить translateX (100%), но Z может использовать только определенные значения. Так что я не решил здесь проблему low, я могу только вручную написать значение translateZ или использовать js для его динамического назначения. Эффект следующий, если есть лучшее решение, вы можете прокомментировать в блоге и сообщить мне.

.cube4{
    width: 100%;
    height: 100%;
    background: gray;
    transform-origin: right top;
    transform: translateZ(30px);
}

11. .cube5 тоже верхняя поверхность.Наши верхняя и нижняя поверхности квадратные.Если .cube5 записать с шириной и высотой 100%, то это будет прямоугольник.Чтобы вручную или динамически не прописывать высоту, другой метод записи используется для установки ширины. :100%; не устанавливайте высоту, установите padding-top: 100%; это также делает .cube5 квадратом, определите розовый цвет, поверните на 90 градусов по оси X, код и эффект следующим образом

.cube5{
    width: 100%;
    padding-top: 100%;
    background: pink;
    transform-origin: left top;
    transform: rotateX(90deg);
}

12. Наконец, .cube6 и .cube5 пишутся одинаково, но нам нужно абсолютно позиционировать позицию внизу, а классу .cube в это время установить прозрачность 50%, что нам удобно проверить. Код и эффект следующие

.cube6{
    width: 100%;
    padding-top: 100%;
    background: black;
    top: inherit;
    bottom: 0;
    transform-origin: left bottom;
    transform: rotateX(-90deg);
}

13. Мы определяем каждую поверхность как красную и настраиваем значение цвета каждой поверхности, чтобы это выглядело так, как будто есть эффект угла обзора.

14. Теперь, когда кубоид написан, давайте сделаем несколько анимаций, добавим div.cube-wapper, чтобы обернуть блок-куб прямо сейчас и сделать блок-куб абсолютно расположенным внизу родительского элемента, чтобы высота изменяется при расширении и сжатии, таймер js изменяет высоту окна каждые 5 секунд, эффект следующий

let boxs = document.getElementsByClassName('cube-box');
setInterval(()=>{
    for(let item in boxs){
        if(boxs[item].style) boxs[item].style.height = `${Math.random()*300}px`;
    }
},5000)

15. Нет, почему дно все еще движется? Причина в том, что поворот нашего преобразования записан в .cube-box.При изменении высоты на него будет влиять вращение и вызовет сдвиг положения.Поэтому запись преобразования .cube-box в .cube-box .cube-wrapper не будет иметь этой проблемы. Эффект следующий

demo2

Цилиндр, потому что преобразование в gif немного не работает, на самом деле это работает намного лучше. Реализация этого довольно странная, и практически бесполезна в практических ситуациях.Позвольте мне кратко описать способ реализации ниже.

1. Это все еще похоже на demo1.Сначала определите слой обертки и определите save-3d.Код примерно такой

<div class="wrapper">
    <div class="box" id="circles">
    </div>
</div>

<style>
.wrapper{
    transform-style: preserve-3d;
    width: 100px;
    height: 100px;
}
.box{
    width: 100%;
    height: 100%;
    position: relative;
    transform-style: preserve-3d;
    transform: rotateX(-73.5deg) rotateY(5deg);
}
</style>

2. Вставьте n div в блок, и каждый div имеет тот же стиль, что и border-radius: 50% и граница в 1 пиксель.Единственное отличие состоит в том, что их позиции translateZ расположены рядом друг с другом и отличаются на 1. Фактически, границы 1px расположены последовательно, вплоть до формирования цилиндра, который будет генерировать много div, и, наконец, мы все еще используем js для генерации нужного нам количества div.

let circles = document.getElementById('circles');
for(let i=0;i<100;i++){
    let div = document.createElement('div');
    div.style = `transform: translateZ(${i}px)`;
    div.className = `circle ${i==0||i==99?'bg':''}`;
    circles.appendChild(div);
}

N 1px div соединены вместе без швов, почему до сих пор остаются промежутки? Каждый представляет себе, что лист бумаги нарисовал круг.С самой тонкой стороны бумаги вы не можете видеть круг.Если вы немного измените угол, вы можете увидеть только немного.Это правда. Я тоже пробовал так, пишите шарик, здесь нет гифки, сделайте скриншот, чтобы увидеть эффект, на гитхабе будет код, который вы можете скачать и посмотреть сами, эффект довольно волшебный

demo3

Эффект висящих карт примерно следующий, как 6 фотографий, висящих на линии, с небольшим эффектом дуновения ветра. На самом деле это очень просто, или используйте принцип demo1 выше, чтобы повернуть карты, а затем расположить карты по позиционированию, определить анимацию бесконечного цикла, использовать разное время для каждой карты и, наконец, привязать событие щелчка и использовать переход CSS. анимация для элемента перехода. Анимация перехода гарантирует, что когда элементы изменяются или восстанавливаются, они могут иметь эффекты, поэтому анимация перехода очень подходит для взаимодействия. Примечание. После преобразования в 3d обратите внимание на кликабельную область элемента, а точнее просмотреть ее с помощью инструмента отладки хрома.

Заключение:

CSS 3d не используется во многих сценариях большую часть времени, а также потребляет производительность устройства.Если есть возможность его использовать, это может преподнести небольшой сюрприз пользовательскому опыту на веб-странице, что тоже хорошо.

Хорошо, я знаю, что вам нужно, адрес склада готовgithub.com/zimv/css3d.

Я все это уже здесь видел, почему тебе не нравится~