Как определить размер области объекта после CSS трансформации. То есть, если использовать rotate(-45deg)
объект будет развернут, но как мне определить высоту блока, чтобы объект не наезжал на вышестоящие или ниже стоящие объекты?
-
Подойдут любые варианты, включая js.– Евгений Венеград3 янв 2017 в 5:42
-
Используйте элемент padding для ваших стилей - инфо W3– nikant253 янв 2017 в 15:48
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
задаете новую высоту.
Попробуйте так, надеюсь, поможет.