В ходе работы над визуальным макетом пленочного раздела калькулятора, обнаружилась интересная задачка: необходимо загнуть уголок у пленки, но не нарисовать загнутый уголок в фотошопе, а именно загнуть его в пространстве!
Хватило бы и нарисованного уголочка, если бы в дурную голову не влетела гениальная мысль — когда пользователь выберет прикатку пленки на листовой материал, макет должен повернуться боком, показывая толщину и структуру материала! А когда макет поворачивается боком, с нарисованным уголочком… зрелище весьма ужасное…

Для реализации загнутого уголка, используются исключительно возможности CSS3, в частности — 3D трансформация.
Уголок реализован как квадрат, одна половинка которого — абсолютно прозрачна, а вторая — и есть наш уголок.
После получаса игры с градусами наклона, и кручения в руках транспортира, в мою голову все равно не уложилось — почему при угле поворота по оси Z на 90 градусов, остается зазор, между уголком и плоскостью-родителем?

See the Pen QNJvaM by kapu (@kapu) on CodePen.0

Ну и на закуску ищущим готовое решение загнутого уголка в 3D средствами CSS, вот код моего макета со всеми тенями.

See the Pen NNoLgE by kapu (@kapu) on CodePen.0


На вопрос, почему квадрат-уголок повернут именно на 206 градусов по оси X и на 24 градуса по оси Y отвечу — для приближения сего макета к реальности. Если нажать кнопочку «прозрачная пленка» — картинка на уголке будет выглядеть именно так, как она должна выглядеть, если отогнуть уголок у прозрачной пленки в реальной жизни.


Добавить комментарий