Дело должно начаться с другой моей статьи двухдневной давности В то время я... Забудь о сплетнях.
Вот ссылка на статью:Вы все избалованы Vue~
Вы можете пойти и посмотреть, я думаю, что область комментариев намного интереснее, чем сама моя статья.
Я воспринимаю это как всеобщее признание меня, прикосновение к фарфору — это тоже способность, не так ли~
Но есть еще знакомые, знающие товар.На самом деле, если честно, если написание статьи может помочь человеку, я чувствую себя очень довольным.
Но есть что сказать:
- Хоть я и владею званием класса, но на бесплатной платформе Наггетс мои слова представляют только меня. Я просто лучший в команде, поэтому пишу статьи, чтобы стать лучше.
- Кроме того, я вовсе не считаю зазорным учиться, и мы также прилагаем все усилия, чтобы изменить представление об учебных заведениях в сознании каждого.
- Продолжим разговор о 3D~
Первый взгляд на 3D
В предыдущей статье я упомянул, что 3D можно использовать для обработки многих каруселей изображений. Нет, это оправдывает ожидания. 3D-версия скоро появится~
3D относительно просто.Пока вы понимаете три оси X, Y и Z, нет проблем.Другая глубина резкости.
Чтобы использовать 3D на странице, вы должны создать пространство глубины резкости: перспективу
Например:
body{
perspective: 1000px;
}
Таким образом, на странице можно установить пространство глубины резкости.После того, как у нас будет это пространство, мы можем внести некоторые 3D-изменения на странице, чтобы получить 3D-эффект.
Говоря о преобразовании css, оценивается 2D-преобразование, которое вы все знаете, то естьtransformв атрибутеtranslate,rotateи другие атрибуты, 3D-преобразование — это просто больше, чем одна ось Z:translateZ, rotateX,rotateYЖдать.
Если цветовой блок на картинке используется в качестве нашего экрана дисплея, то я уже нарисовал оси X, Y и Z на картинке.
Поняв это, давайте посмотрим на разницу во вращении трех осей.
Ось X:
Ось Y:
Ось Z:
Остальные смещения и т.д., здесь не будет многословия.Наверное все это знают.Поняв это,можно написать 3D куб бокс с translateZ:
Вот полный код коробки
Вы также можете нажать здесь, чтобы увидеть эффект ~Однако, поскольку используется адрес github, он может не открыться.
Однако освоить их — это только основа.Чтобы превратить карусельное изображение в 3D-кольцо, необходимы некоторые расчеты.Первый шаг — превратить изображение в кольцо, которое на самом деле похоже на квадрат.Удалите верх и низ. Разве это не просто круг?
кольцо-пазл
подумай сначала
На самом деле то, что мы хотим написать, это не настоящий круг, а многоугольник. Есть несколько изображений, которые являются многоугольниками. Если изображений всего четыре, это похоже на приведенный выше код. Но здесь мы все равно должны относиться к нему как к кольцу для расчета.
Так как это кольцо, то сначала должен быть получен радиус кольца, и этот радиус должен меняться в зависимости от изображения.Чем больше изображений, тем больше радиус, тем больше ширина изображения, и тем больше будет радиус. быть.
Если вы хотите получить радиус, вы можете вычислить его по периметру, так что же такое периметр? В самом деле, разве это не длина всех картинок, соединенных встык? В этом случае проще вычислить радиус
написать код
Прежде чем писать, знайте, что то, что вы хотите написать, вероятно, будет примерно таким:
Середина кольца является родителем всех картинок.Сначала сложите все картинки.На самом деле это расположите все картинки,а потом выровняйте их по центру.Затем пусть картинки переместятся на расстояние радиуса в направлении оси Z и поверните их на определенный угол.
Давайте посмотрим на разрыв действия:
Не ясно видел? Все в порядке, еще одно замедленное движение
Основной принцип заключается в том, чтобы сначала повернуть картинку на определенный угол, а затем вытолкнуть ее наружу.
Но понимание так понимание, код на самом деле наоборот, потому что функция смещения рассчитывается от задней части к передней
Например:transform: rotateY(72deg) translateZ(300px);
В этом коде сначала будет рассчитано смещение, а затем будет рассчитано вращение, чтобы достичь цели выталкивания изображения и поворота его на нужный угол.
Как рассчитать угол? на самом деле это очень легко
Например, для 5-стороннего типа вы можете напрямую разделить 360° на 5 и получить угол, на который нужно повернуть каждое изображение.
Код кольца:
смотри сюда смотри сюда~
Вы также можете нажать здесь, чтобы увидеть эффект ~Однако, поскольку используется адрес github, он может не открыться.
Имея эти основы, все кольцо можно превратить в слайд-шоу, собрав его с родителем размером всего с одно изображение.
При переключении нужно только повернуть на соответствующий угол.
слайд-шоуПолный код здесь~
Вы также можете нажать здесь, чтобы увидеть эффект ~Однако, поскольку используется адрес github, он может не открыться.
окончательный эффект
- это мыКоманда Хуагошаньпроект с открытым исходным кодомelement3Добро пожаловать, чтобы попробовать и звезду
- Библиотека компонентов внешнего интерфейса, поддерживающая vue3.