Transform rotate height

Евгений Венеград

Как определить размер области объекта после CSS трансформации. То есть, если использовать rotate(-45deg) объект будет развернут, но как мне определить высоту блока, чтобы объект не наезжал на вышестоящие или ниже стоящие объекты?

1 ответ

Евгений Венеград

Если делаете объекту rotate(-45deg), можно там же задать высоту в значение гипотенузы этого объекта. То есть

Пример кода с использованием stylus:

sqrt(x)
  return math(x, 'sqrt')

.rot-object
  width w:20px
  height h:40px

.rot-object
  transform rotate(-45deg)
  height sqrt(w*w + h*h)

(https://stackoverflow.com/a/21196698)

Ну, или просто вручную считаете корень квадратов сумм ширины и высоты того объекта и в блоке с rotate задаете новую высоту. Попробуйте так, надеюсь, поможет.

licensed under cc by-sa 3.0 with attribution.