Css perspective не работает

CSS 3d-преобразование не работает, если в конце свойства установлена ​​перспектива.

почему это происходит? какие-либо другие правила / ограничения для transform ?

хотя мне это кажется странным, это не похоже на ошибку, поскольку я могу воспроизвести это в Chrome / FF

box:nth-child(1):hover < transform: perspective(1000px) translate3d(0, 0, -100px); >box:nth-child(2):hover < transform: translate3d(0, 0, 100px) perspective(1000px); >box < padding: 20px; display: inline-flex; align-items: center; justify-content: center; font-family: monospace; transition: transform .4s; background: rgba(255, 0, 0, 0.3); margin: 20px; font-size: 12px; perspective: 1000px; cursor: pointer; >box:nth-child(2)
 transform: perspective(1000px) translate3d(0,0,100px); transform: translate3d(0,0,100px) perspective(1000px); 

Браузер обычно не имеет информации о z-измерении (зачем она нужна?). После того, как вы не сообщаете браузеру z-позицию элемента, как вы можете выполнить трехмерный перевод?

@MatrixTai прочтите о transform3d, и вы поймете

@TemaniAfif, я имею в виду, что OP должен сначала объявить перспективу, он инициализирует трехмерное пространство. Это просто обратный вопрос.

@MatrixTai, почему порядок так важен? Я немного сбит с толку, потому что когда я пишу, например, Порядок transform: translate3d(0,0,100px) rotate3d(1,0,0,45deg) значения не имеет, но с точки зрения перспективы имеет значение.

@godblessstrawberry, это имеет значение и в этом случае . инвертируйте порядок, и вы хотите получить тот же результат, у вас есть тот же результат только в каком-то конкретном случае

@TemaniAfif вау, это действительно удивительно, я только что пришел из мира преобразований 2d, где (я больше не уверен) порядок не имел значения — плохо, я ожидал того же от 3d

Читайте также:  Java вывод на экран метода

@godblessstrawberry даже для 2d это имеет большое значение;) в моем ответе вы найдете ссылку a на предыдущий вопрос, посвященный 2d transfrom, и вы увидите

@godblessstrawberry, имеет значение для заказа transform: translate3d(0,0,100px) rotate3d(1,0,0,45deg) . Я тоже сделаю ответную обложку для этого. Но теоретически ответа Темани достаточно.

Чтобы выровнять элемент

по горизонтали и вертикали с помощью CSS, можно использовать комбинацию свойств и значений CSS. Вот несколько методов.

React Router стала незаменимой библиотекой для создания одностраничных приложений с навигацией в React. В этой статье блога мы подробно рассмотрим.

Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -.

Ранее разработчики использовали макеты с помощью Position и Float. После появления flexbox сценарий полностью изменился.

Bootstrap — это популярный front-end фреймворк, который делает веб-разработку проще и быстрее. Использование Bootstrap растет по мере того, как все.

Ответы 2

В обоих случаях вы должны сначала сделать perspective . Если вы добавите его в конце, перевод сначала будет сделан без учета перспективы.

Если мы обратимся к Спецификация, мы сможем увидеть, как вычисляется матрица преобразования:

  1. Start with the identity matrix.
  2. Translate by the computed X and Y of transform-origin
  3. Multiply by each of the transform functions in transform property from left to right
  4. Translate by the negated computed X and Y values of transform-origin

Как вы можете видеть на шаге (3), это от слева направо (вот еще один вопрос, по которому вы можете получить дополнительную информацию и понять, почему порядок важен: Имитация transform-origin с помощью translate)

Также бесполезно использовать свойство перспектива внутри элемента, который вы хотите преобразовать.

box:nth-child(1):hover < transform: perspective(1000px) translate3d(0, 0, -100px); >box:nth-child(2):hover < transform: perspective(1000px) translate3d(0, 0, 100px); >box < padding: 20px; display: inline-flex; align-items: center; justify-content: center; font-family: monospace; transition: transform .4s; background: rgba(255, 0, 0, 0.3); margin: 20px; /*perspective: 1000px;*/ font-size: 12px; cursor: pointer; >box:nth-child(2)
 transform: perspective(1000px) translate3d(0,0,100px); transform: perspective(1000px) translate3d(0,0,100px); 

Чтобы избежать путаницы с порядком, вы можете объявить перспективу в родительском элементе, НО вам нужно обратить внимание на источник, поскольку он не будет таким же:

box:nth-child(1):hover < transform:translate3d(0, 0, -100px); >box:nth-child(2):hover < transform:translate3d(0, 0, 100px); >body < perspective:1000px; >box < padding: 20px; display: inline-flex; align-items: center; justify-content: center; font-family: monospace; transition: transform .4s; background: rgba(255, 0, 0, 0.3); margin: 20px; font-size: 12px; cursor: pointer; >box:nth-child(2)
 transform: perspective(1000px) translate3d(0,0,100px); transform: perspective(1000px) translate3d(0,0,100px); 

Но кое-что я не понимаю. Зачем объявлять перспективу для тела, если она уже была объявлена ​​для элемента box?

@PIIANTOM Я переместил объявление из коробки в тело

@PIIANTOM Я понял вашу точку зрения, если вы говорите об объявлении перспективы внутри поля, а не внутри преобразования [чего я не заметил], это бесполезно в обоих случаях, я удалил его . перспектива объявления на элементе влияет только на преобразованный дочерний элемент, а не элемент

Хотя другой ответ уже дает довольно четкое представление о том, как работает perspective() . Но я хочу быть более конкретным.

box:nth-child(1):hover < transform: perspective(1000px) translate3d(0, 0, 100px); >box:nth-child(2):hover < transform: translate3d(0, 0, 100px) perspective(1000px); >box:nth-child(3):hover < transform: rotate3d(1, 0, 0, 45deg) perspective(1000px) translate3d(0, 0, 100px); >box:nth-child(4):hover < transform: rotate3d(1, 0, 0, 45deg) translate3d(0, 0, 100px) perspective(1000px); >box:nth-child(5):hover < transform: rotate3d(1, 0, 0, 45deg) translate3d(0, 0, 100px); >box:nth-child(6):hover < transform: translate3d(0, 0, 100px) rotate3d(1, 0, 0, 45deg); >box:nth-child(7):hover < transform: perspective(1000px) rotate3d(1, 0, 0, 45deg) translate3d(0, 0, 100px); >box:nth-child(8):hover < transform: perspective(1000px) translate3d(0, 0, 100px) rotate3d(1, 0, 0, 45deg); >box < padding: 20px; display: inline-flex; align-items: center; justify-content: center; font-family: monospace; transition: transform .4s; background: rgba(255, 0, 0, 0.3); margin: 20px; font-size: 12px; perspective: 1000px; cursor: pointer; >box:nth-child(even)
 1. transform: perspective(1000px) translate3d(0,0,100px); 2. transform: translate3d(0,0,100px) perspective(1000px); 3. transform: rotate3d(1,0,0,45deg) perspective(1000px) translate3d(0, 0, 100px); 4. transform: rotate3d(1,0,0,45deg) translate3d(0, 0, 100px) perspective(1000px); 5. transform: rotate3d(1,0,0,45deg) translate3d(0, 0, 100px); 6. transform: translate3d(0, 0, 100px) rotate3d(1,0,0,45deg); 7. perspective(1000px) rotate3d(1,0,0,45deg) translate3d(0, 0, 100px); 8. perspective(1000px) translate3d(0, 0, 100px) rotate3d(1,0,0,45deg); 

Прежде всего, например, 1 и 2. Достаточно наглядно показано, как perspective() работает с translate3d .

Но разве это означает, что без perspective() translate3d бесполезен?

Нет. Как я уже упоминал в самой первой команде.

without telling the browser the z-position of element, how can you do 3-dimensional translation?

Но как насчет двухмерного?

Взгляните на пример 3 и 5. Они ведут себя совершенно по-разному.

Почему? Потому что после того, как вы сделаете поворот, его z-размер больше не будет z-размером ваших окон. Блок перемещается вверх как 100 * cos (45) = 50 пикселей.

И поэтому 5 и 6 работают совершенно по-разному, порядок между rotate3d(1,0,0,45deg) и translate3d(0, 0, 100px) имеет значение.

Для 7 и 8 это становится гораздо более очевидным, когда также становится доступным z-index для элемента. Есть разница.

Больно навести курсор на элемент: p

@TemaniAfif, ха-ха, да, в этих случаях элемент двигался вверх.

Источник

Почему свойство CSS «perspective» в Safari ломает оптимизацию графики для 4К и 5К дисплеев в случае повторного использования?

Я использую вот такой скрипт от тумпануса, эффект SCALE & ROTATE PUSHER:

Есть у меня вот такой вот блок
.st-effect-11.st-container
собственно логика его такова, при нажатии на кнопку, блок st-container отобразится в перспективе

5be5bd97cbc38733986889.png


Вот тут и мои грабли и сам вопрос:

Все объекты в блоке st-container работают хорошо на и дисплеях! НО! Если к какому либо блоку применить другое правило perspective, то даже текст\шрифт внутри этого блока, отображается на и заблуренным. На обычных дисплеях этого не видно.

5be7278c890ff804399968.png

Есть ли у кого идеи как это пофиксить?

————-
Я пробовал прописать блоку в дефолт состояние

Помогает только полное уделение перспективы к этому блоку:
.st-effect-11.st-container <>
Но пропадает красивый эффект открытия блока.

5be726f4e4a31811006402.png

Сложный 4 комментария

voker2005

jamtuson, что-то у меня не получилось найти ему применение в данной ситуации.
Попробовал прописать данное правило в разных вариациях, ускорения не заметил, также не заметил и решения вопроса 🙁 может конечно не те блоки выбирал, но перепробовал много вариантов, вплоть до метода тыка.

И да, я забыл уточнить что данная ситуация наблюдается только в Safari.

voker2005, не все версии сафари поддерживают это свойство. Также, можете попробовать включить аппаратное ускорение с помощью transform: translate3d(0, 0, 1px); для блока, который смещается. Или попробовать изменить метод рендера шрифта:
-webkit-font-smoothing: subpixel-antialiased;
gearmobile.github.io/css/css3-font-smoothing

will-change: transform нужно использовать только тогда, когда вы точно понимаете, что делаете.
Например, браузер вообще может игнорировать свойство в целях оптимизации. Кстати, все приличные браузеры на больших элементах так и делают.
translate3d(0, 0, 1px) неминуемо отправит рендер блока на видеокарту, что гарантированно создаст мыло для текста. Тут как раз все дело в том, что нужно отключать аппаратное ускорение после завершения анимации. Нет аппаратного ускорения — рендеринг отправляется на процессор, и шрифты рендерятся нормально. Есть аппаратное ускорение — шрифты рендерятся «как получится»: могут быть неотличимы от рендеринга без ускорения(четкими), а могут упасть в мыло.
-webkit-font-smoothing: subpixel-antialiased; здесь ничем не поможет(если только ну совсем чуть-чуть). Есть блок, его размер, например, 300х1000. Этот блок для ретина экранов рендерится в размере 2x, то есть это уже 600×2000. Так как браузер понятия не имеет, какой внутри блока контент, то блок рендерится так, как будто там все постоянно меняется каждую секунду, и чтобы держать 60 FPS, все рендерится в уменьшенном виде. Поэтому получается мыло, так как мы 300х1000 пытаемся отскейлить в 2 раза. На слабых компьютерах с sd-дисплеями браузер сначала делает даунскейл, а потом увеличивает получившийся рендер до размеров блока — так быстрее.
Загляните в DevTools во вкладку Layers(Chrome/Safari), это хотя бы даст представление сколько слоев композиции у вас на странице, и каковы причины создания этих слоев. Вот от туда и плясать.

profesor08

Ну да, тут ничего не поделать.
Можешь попробовать задать трансформируемому блоку transform : perspective(1px) translate. тоесть изменить правило так, что в нем оказалось perspective(1px).

voker2005

Спасибо. Я попробовал добавить свойство perspective(1500px) для .st-effect-11.st-menu-open .st-pusher

.st-effect-11.st-menu-open .st-pusher

Что имеем?
1. Мыло пропало и это очень хорошо!
2. НО! Немного изменился эффект! Подробнее смотрите видео (ссылка на youtube, 2 минуты с хвостиком).

Вот по пункту 2, может быть есть соображения как это пофиксить путем CSS? Чтобы эффект был больше похож на оригинал, без мальца косых съездов этих блоков.

profesor08

.st-effect-11.st-menu-open .st-pusher

Заменить: perspective(1px), единичка. Старую перспективу у контейнера надо оставить.

Источник

CSS перспектива не работает

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

Я не понимаю, почему перспектива не работает. Это лучшая практика?

Можно ли вращать куб в целом??

.container < margin: 200px auto; width: 200px; height: 200px; position: relative; -webkit-perspective: 800px; >#cube < width: 100%; height: 100%; position: absolute; -webkit-transform-style: preserve-3d; >#cube figure < width: 198px; height: 198px; display: block; position: absolute; border: 1px solid #ddd; background-color: rgba(0,0,0,0.2); >#cube .front < -webkit-transform: rotateY(0deg) translateZ(100px); >#cube .back < -webkit-transform: rotateX(180deg) translateZ(100px); >#cube .right < -webkit-transform: rotateY(90deg) translateZ(100px); >#cube .left < -webkit-transform: rotateY(-90deg) translateZ(100px); >#cube .top < -webkit-transform: rotateX(90deg) translateZ(100px); >#cube .bottom

3 ответа

У меня есть обертка вокруг куба, который я вращаю — в этом случае, для простоты, я на самом деле использую три div, один для X, один для Y и один для Z.

Детская площадка внизу должна показать вам, как работает перспектива и т.д.

Проблема может заключаться в том, что аппаратное ускорение не поддерживалось на вашем ПК, и оно было на ваших преобразованиях mac. css3d, таких как rotateX а также rotateY требуют аппаратного ускорения.

в Chrome зайдите в адресную строку и введите

3D CSS: недоступно. Аппаратное ускорение отключено.

если это так, то 3d куб не виден.

Раньше я работал со многими 3D-трансформациями, но недавно заметил, что перспектива CSS3 не влияет на мои веб-браузеры, включая Chrome. Попробовал следующее, и это помогло в Google Chrome:

  1. Перейдите к «chrome://flags»
  2. Найдите элемент с надписью «Переопределить список программного рендеринга» и отключите его
  3. Перезапустите ваш браузер

Я знаю, что немного поздно, но на всякий случай это может помочь вам.

Источник

Chrome CSS Perspective не работает на всех блоках

У меня есть странное поведение в интернет-магазине, который я разрабатываю. В Google Chrome один из двух разделов, которые нужно повернуть, остается плоским. Другой — правильно повернут. Все отлично работает в Firefox. Любая идея, что может быть неправильным? Вот скриншоты (Chrome слева и Firefox справа): Изображение 66110 Изображение 66111Вот соответствующий код Html и Css:

 
Just SomeText
.portrait #front < right: 7; >.portrait #back, .portrait #front < position: absolute; width: 132px; height: 214px; >#front < transform: rotateY(7deg); -webkit-transform: rotateY(7deg); -ms-transform: rotateY(7deg); >html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary, time, mark, audio, video < margin: 0; padding: 0; border: 0; font-size: 100%; font: inherit; vertical-align: baseline; text-decoration: none; >user agent stylesheetdiv < display: block; >Inherited from div#live-preview.live-preview.portrait Style Attribute < color: rgb(192, 192, 192); font-family: helvetica; >.live-preview

Вы можете увидеть живую страницу в http://www.fastermaster.at/konfigurator EDIT: Я попытался открыть страницу в режиме инкогнито, так что все расширения Chrome неактивны, но результат все тот же.

Источник

Оцените статью