Почему картинка искажается при transform rotate?

Question

[Павел Орловский]

Почему картинка искажается при 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>

Вот код 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);
}

Глобальный стиль CSS:

img {
  display: block;
  width: 100%;
  object-fit: cover;
}

Comments

[modelair]

посмотреть где-то можно?

Answer 1

[rootnoroot]

vertical align не?

или сделайте на пару пикселей больше картинку при ховере

Comments

[Ankhena]

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);
}

Просто интересно почему этот зазор появляется, картинка скачет при ротейте на ховер

[Сергей delphinpro]

Павел Орловский, вы переписали три раза одно свойство. Сработало только последнее.
Несколько трансформаций записываются так:

.image:hover {
  transform: rotate(0) translateY(.5px) scale(1.01);
}

Это не относится к вашей проблеме, просто замечание на будущее.

[Павел Орловский]

Сергей delphinpro, сработали кстате все три =О . Но как у Вас лучше выглядит.

[Сергей delphinpro]

Павел Орловский, да не болтайте ) сработало только последнее. посмотрите в инспекторе

[Ankhena]

Павел Орловский, это не колхоз, это просто полная фигня. Там просто первые две строки лишние.

[Павел Орловский]

Ankhena, хорошо, я понимаю что лишние, но вопрос про зазор, как его тогда убрать?

[Ankhena]

Павел Орловский, для начала прислушаться к просьбе из комментария: сделать песочницу с видимой проблемой на codepen.io
Добавить её в вопрос и потом позвать.