Как повернуть и наклонить блок
Помогите сверстать как на картинке: Нужно как-то наклонить и развернуть блок, скруглить края, а снизу добавить нечто, не знаю как это назвать, чтобы блок смотрелся объемным. И тень падала от этого блока.
Буду очень благодарен за информацию, примеры. Может кто-то уже делал нечто подобное.
Что самое интересное — это должно стать частью карусели.
За любые наводки буду весьма признателен.
Отслеживать
52.2k 11 11 золотых знаков 108 108 серебряных знаков 312 312 бронзовых знаков
задан 8 апр 2015 в 21:55
Ruslan OPCREW Ruslan OPCREW
Как наклонить одну сторону блока?
Нужно наклонить одну сторону блока.
- Вопрос задан более трёх лет назад
- 522 просмотра
Комментировать
Решения вопроса 1
Ankhena @Ankhena Куратор тега CSS
Нежно люблю верстку
1. Использовать градиент
2. К прямоугольному блоку пристроить треугольник с помощью before|after или доп блока, в зависимости от макета.
Ответ написан более трёх лет назад
Нравится 1 4 комментария
Функция skew()
Функция наклона skew() хорошо подходит для создания эффекта 3D. Принцип ее работы заключается в наклоне всех горизонтальных либо вертикальных линий элемента на определенное количество градусов. Визуально элемент словно искажается, растягивается в определенные стороны. Наклон может производиться по осям X и Y.
Функция skew() принимает два параметра. Первый параметр отвечает за наклон по горизонтали, второй — за наклон по вертикали. В качестве значения указывается угол от 0 до 360 с приставкой deg. Например:
transform: skew(30deg, 0);
Первый параметр отвечает за наклон вертикальных линий к оси X. Движение происходит от верхней части элемента и против часовой стрелки:
Второй параметр, соответственно, отвечает за наклон горизонтальных линий к оси Y. Направление движения — по часовой стрелке, начиная от правой стороны элемента:
transform: skew(0, 30deg);
Отдельные функции для осей
По аналогии с предыдущими рассмотренными функциями, в CSS есть отдельные функции skewX() и skewY() для управления наклоном от каждой оси по отдельности.
Практический пример использования skewX() (нажмите на картинку, если вам интересен исходный код данного примера):
Код HTML для данного примера:
Код CSS для данного примера:
body < background: #e1ccf3; >.container < position: absolute; width: 300px; height: 300px; left: 50%; top: 50%; margin-left: -150px; margin-top: -150px; >.skew < display: inline-block; position: inherit; >#back-left < background: #440080; bottom: 0; left: 15px; width: 130px; height: 100px; -moz-transform: skewX(-60deg); -webkit-transform: skewX(-60deg); -o-transform: skewX(-60deg); -ms-transform: skewX(-60deg); transform: skewX(-60deg); >#back-right < background: #5f07ac; bottom: 0; right: 15px; width: 130px; height: 100px; -moz-transform: skewX(60deg); -webkit-transform: skewX(60deg); -o-transform: skewX(60deg); -ms-transform: skewX(60deg); transform: skewX(60deg); >#front-left < background: #752eb4; bottom: 0; left: 5px; width: 130px; height: 340px; -moz-transform: skewX(-25deg); -webkit-transform: skewX(-25deg); -o-transform: skewX(-25deg); -ms-transform: skewX(-25deg); transform: skewX(-25deg); >#front-right
2D трансформации. Наклон — CSS: Transform (трансформация объектов)
Последнее, что можно сделать с элементом в двухмерном пространстве с использованием свойства transform — наклон. Эта трансформация достигается за счет наклона элемента по одной из оси или по двум осям одновременно.
Не путайте rotate и skew — rotate отвечает за поворот элемента, а skew за трансформацию путем наклона. Очень часто эти функции используются вместе для создания интересных анимаций.
Взглянем, как именно меняется элемент при использовании функции skew . Для демонстрации возьмем прямоугольник и наклоним его на 45 градусов влево. С точки зрения CSS это простая операция, которая выглядит так:
.box transform: skewX(45deg); > Вначале может показаться непонятным, как именно трансформировался элемент. Разберем все по порядку:
- Как и с другими функциями, функция skew является общей для функций skewX и skewY . В примере была использована трансформация только по оси x.
- 45deg . В уроке про поворот элемента были описаны все основные единицы измерения, которыми описываются операции поворота. Такие же единицы используются и для наклона элемента по осям с помощью функции skew . В примере использовано значение 45deg , что значит 45 градусов влево. При использовании отрицательных значений наклон будет осуществляться вправо.
Чтобы понять, где именно 45 градусов в примере, взглянем на следующее изображение. На нем красным цветом обозначено исходное месторасположение элемента, а синим — конечное. Можно сказать, что браузер взял обе стороны нашего прямоугольника и наклонил их на 45 градусов. На изображении отдельно отмечены получившиеся углы.
Как и в случае с другими трансформациями, skew затрагивает не только тот блок, на котором применяется, но и все вложенные. Это видно на примере текста внутри синего блока из первого примера.
Есть возможность избежать этого небольшим, но красивым решением. Для внутреннего блока создается отдельный контейнер и указывается противоположное значение функции skew . Например, если блок наклоняется на 45 градусов по горизонтали, то контент должен наклоняться на минус 45 градусов по горизонтали. Это одна из самых частых операций при использовании skew .
Важно: при использовании такого приема всегда внимательно следите за контентом внутри. Дело в том, что развернув его, мы исказили контент относительно родительского блока. В такой ситуации очень легко потерять часть контента из-за его выхода за пределы родительского блока.
Использование skewY принципиально отличается только осью, по которой происходит трансформация. Поворот происходит не по вертикальным линиям, как в случае со skewX , а по горизонтальным. Из-за этого сама трансформация более явная, так как для глаза меняется опорная точка. Если в случае со skewX сам элемент находился на оси x и не смещался, то при skewY эта опорная точка для глаза исчезает.
На примере выше показано, как трансформируется элемент при использовании skewY . Красный блок показывает анимацию преобразования элемента. Зеленый блок — элемент после использования skewY(45deg) .
Обратите внимание на вертикальные линии. Они показывают ось y. По линиям можно увидеть, что сам элемент никак не деформируется по оси x, так как линии всегда прямые.
Открыть доступ
Курсы программирования для новичков и опытных разработчиков. Начните обучение бесплатно
- 130 курсов, 2000+ часов теории
- 1000 практических заданий в браузере
- 360 000 студентов
Наши выпускники работают в компаниях: