- CSS 3d-преобразование не работает, если в конце свойства установлена перспектива.
- Ответы 2
- Почему свойство CSS «perspective» в Safari ломает оптимизацию графики для 4К и 5К дисплеев в случае повторного использования?
- CSS перспектива не работает
- 3 ответа
- Chrome 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
@godblessstrawberry даже для 2d это имеет большое значение;) в моем ответе вы найдете ссылку a на предыдущий вопрос, посвященный 2d transfrom, и вы увидите
@godblessstrawberry, имеет значение для заказа transform: translate3d(0,0,100px) rotate3d(1,0,0,45deg) . Я тоже сделаю ответную обложку для этого. Но теоретически ответа Темани достаточно.
Чтобы выровнять элемент
React Router стала незаменимой библиотекой для создания одностраничных приложений с навигацией в React. В этой статье блога мы подробно рассмотрим.
Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -.
Ранее разработчики использовали макеты с помощью Position и Float. После появления flexbox сценарий полностью изменился.
Bootstrap — это популярный front-end фреймворк, который делает веб-разработку проще и быстрее. Использование Bootstrap растет по мере того, как все.
Ответы 2
В обоих случаях вы должны сначала сделать perspective . Если вы добавите его в конце, перевод сначала будет сделан без учета перспективы.
Если мы обратимся к Спецификация, мы сможем увидеть, как вычисляется матрица преобразования:
- Start with the identity matrix.
- Translate by the computed X and Y of transform-origin
- Multiply by each of the transform functions in transform property from left to right
- 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 отобразится в перспективе
Вот тут и мои грабли и сам вопрос:
Все объекты в блоке st-container работают хорошо на 4К и 5К дисплеях! НО! Если к какому либо блоку применить другое правило perspective, то даже текст\шрифт внутри этого блока, отображается на 4К и 5К заблуренным. На обычных дисплеях этого не видно.
Есть ли у кого идеи как это пофиксить?
————-
Я пробовал прописать блоку в дефолт состояние
Помогает только полное уделение перспективы к этому блоку:
.st-effect-11.st-container <>
Но пропадает красивый эффект открытия блока.
Сложный 4 комментария
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), это хотя бы даст представление сколько слоев композиции у вас на странице, и каковы причины создания этих слоев. Вот от туда и плясать.
Ну да, тут ничего не поделать.
Можешь попробовать задать трансформируемому блоку transform : perspective(1px) translate. тоесть изменить правило так, что в нем оказалось perspective(1px).
Спасибо. Я попробовал добавить свойство perspective(1500px) для .st-effect-11.st-menu-open .st-pusher
.st-effect-11.st-menu-open .st-pusher
Что имеем?
1. Мыло пропало и это очень хорошо!
2. НО! Немного изменился эффект! Подробнее смотрите видео (ссылка на youtube, 2 минуты с хвостиком).
Вот по пункту 2, может быть есть соображения как это пофиксить путем CSS? Чтобы эффект был больше похож на оригинал, без мальца косых съездов этих блоков.
.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:
- Перейдите к «chrome://flags»
- Найдите элемент с надписью «Переопределить список программного рендеринга» и отключите его
- Перезапустите ваш браузер
Я знаю, что немного поздно, но на всякий случай это может помочь вам.
Chrome CSS Perspective не работает на всех блоках
У меня есть странное поведение в интернет-магазине, который я разрабатываю. В Google Chrome один из двух разделов, которые нужно повернуть, остается плоским. Другой — правильно повернут. Все отлично работает в Firefox. Любая идея, что может быть неправильным? Вот скриншоты (Chrome слева и Firefox справа):
Вот соответствующий код Html и Css:
.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-previewJust SomeText
Вы можете увидеть живую страницу в http://www.fastermaster.at/konfigurator EDIT: Я попытался открыть страницу в режиме инкогнито, так что все расширения Chrome неактивны, но результат все тот же.