Почему картинка искажается при transform rotate?
Почему картинка искажается при transform rotate? Без transform rotate блок с картинкой заполняет весь родительский блок без зазоров.
Но когда я ставлю transform rotate (10deg)
Я поставил ховер transform rotate (0) на блок с картинкой и при наведении получается вот такой дефект
Зазор остается со свойством will-change: transform. Но если я will-change: transform убираю зазор так же есть когда блок с картинкой достигает 0deg и картинка начинает прыгать и заполнять родительский блок (растягиваться по вертикали)
Вот код jsx:
<div className={styles.imageWrapper}> <div className={styles.image}> <img src={PERSON} alt="person" /> </div> </div> |
<div className={styles.imageWrapper}> <div className={styles.image}> <img src={PERSON} alt="person" /> </div> </div>
Вот код CSS:
.imageWrapper { width: 100%; aspect-ratio: 1/1; border-radius: 2rem; background: linear-gradient(45deg, transparent, var(--color-primary), transparent); display: grid; place-items: center; } .image { border-radius: 2rem; overflow: hidden; will-change: transform; transform: rotate(10deg); transition: var(--transition); } .image:hover { transform: rotate(0); } |
.imageWrapper { width: 100%; aspect-ratio: 1/1; border-radius: 2rem; background: linear-gradient(45deg, transparent, var(--color-primary), transparent); display: grid; place-items: center; } .image { border-radius: 2rem; overflow: hidden; will-change: transform; transform: rotate(10deg); transition: var(--transition); } .image:hover { transform: rotate(0); }
Глобальный стиль CSS:
img { display: block; width: 100%; object-fit: cover; } |
img { display: block; width: 100%; object-fit: cover; }
Дополнительно:
посмотреть где-то можно?
Ответы:
vertical align не?
или сделайте на пару пикселей больше картинку при ховере
-
vertical align не?
Не.
Потому что vertical-align работает вовсе не так, как вам кажется.
1. https://web-standards.ru/articles/vertical-align/
2. https://css-live.ru/css/metriki-shrifta-line-heigh... - Ankhena, сделал так, но это колхоз
.image:hover { transform: rotate(0); transform: translateY(.5px); transform: scale(1.01); }
.image:hover { transform: rotate(0); transform: translateY(.5px); transform: scale(1.01); }
Просто интересно почему этот зазор появляется, картинка скачет при ротейте на ховер
- Павел Орловский, вы переписали три раза одно свойство. Сработало только последнее.
Несколько трансформаций записываются так:.image:hover { transform: rotate(0) translateY(.5px) scale(1.01); }
.image:hover { transform: rotate(0) translateY(.5px) scale(1.01); }
Это не относится к вашей проблеме, просто замечание на будущее.
- Сергей delphinpro, сработали кстате все три =О . Но как у Вас лучше выглядит.
- Павел Орловский, да не болтайте ) сработало только последнее. посмотрите в инспекторе
- Павел Орловский, это не колхоз, это просто полная фигня. Там просто первые две строки лишние.
- Ankhena, хорошо, я понимаю что лишние, но вопрос про зазор, как его тогда убрать?
- Павел Орловский, для начала прислушаться к просьбе из комментария: сделать песочницу с видимой проблемой на codepen.io
Добавить её в вопрос и потом позвать.
Опишите проблему, и специалист поможет с настройкой, исправлением ошибки или доработкой сайта. Подберём понятный план работ без лишней переписки.
Пока нет других ответов. Будьте первым, кто поможет автору.
Ответить на вопрос
При искажении картинки при использовании CSS свойства transform: rotate() возможно несколько причин. Одна из основных причин – это то, что при повороте изображения оно может быть обрезано или искажено из-за изменения его размеров и расположения на странице.
Для того чтобы избежать искажения картинки при повороте, можно использовать следующие рекомендации:
1. Используйте свойство transform-origin для указания точки, относительно которой будет происходить поворот изображения. Это позволит избежать смещения изображения и сохранить его пропорции.
2. Убедитесь, что размеры контейнера, в котором находится изображение, соответствуют его исходным размерам. Избегайте изменения размеров контейнера после применения поворота, чтобы избежать искажения изображения.
3. Проверьте, что изображение имеет достаточный отступ от других элементов на странице. Искажение изображения может происходить из-за его перекрытия другими элементами при повороте.
Пример использования свойства transform-origin для поворота изображения без искажений:
img { transform: rotate(45deg); transform-origin: center center; }
Этот код повернет изображение на 45 градусов относительно его центра, что поможет избежать искажений при повороте. Помните, что каждая ситуация может иметь свои особенности, поэтому экспериментируйте с различными значениями свойств и настройками, чтобы добиться желаемого результата.