Свойство transform-origin на примере
CSS свойство transform-origin позволяет задать местоположение точки, относительно которой происходит трансформация (смещение, деформация, вращение, масштабирование) элемента. По умолчанию значение свойства transform-origin равно center, поэтому все действия происходят относительно центра.
transform-origin: center;
Но что делать, если нам нужно задать точку фиксации в другом месте? Сейчас мы рассмотрим на примере стикера, условно зафиксированного сверху магнитом к холодильнику.
HTML разметка
Наш стикер будет состоять из двух блоков наложенных друг на друга. Нижний блок темного цвета sticker выступает в роли неподвижной подложки для наглядности. Верхний блок sticker_move изображает сам стикер голубого цвета, который будет смещаться на 10 градусов при наведении мыши на объект. На стикере содержится список ингридиентов для пиццы, расположенных в тегах p.
<section class="section">
<div class="sticker">
<div class="sticker_move">
<div class="title">PIZZA INGREDIENTS</div>
<div>
<p>1 ball Best Homemade Pizza Dough</p>
<p>1/3 cup Easy Pizza Sauce</p>
<p>3 ounces fresh mozzarella cheese</p>
<p>2 basil leaves</p>
<p>Semolina flour</p>
</div>
</div>
</div>
</section>
CSS код
Вся эта конструкция помещена в обертку section для позиционирования стикера в центре страницы.
.section {
width: 100%;
height: 100vh;
display: flex;
justify-content: center;
align-items: center;
}
Зададим размеры, цвет и отступы у подложки для стикера.
.sticker {
height: 300px;
width: 300px;
background-color: #666;
margin: 0 50px 50px 0;
position: relative; // родитель для магнита
}
Нарисуем небольшой магнит с помощью псевдоэлемента after. Главная хитрость здесь - это размещение магнита. Позиция магнита должна совпасть с координатами свойства transform-origin, относительно которого будет поворачиваться стикер.
.sticker:after {
content: "";
position: absolute; // позиция относительно родителя
top: 0; // фиксация магнита сверху
left: 50%; // фиксация магнита посередине верхнего края стикера
width: 10px;
height: 10px;
background: rgb(123, 255, 0);
border: 5px solid white;
border-radius: 10px;
margin: -10px 0 0 -10px;
}
Обратите внимание, что высота у голубого блока на 40 пикселей меньше, чем у темного за счет паддингов.
.title {
padding-top: 30px;
padding-bottom: 20px;
text-decoration: underline;
}
.sticker_move {
display: block;
height: 260px;
background: rgba(0, 174, 255, 0.692);
padding: 20px;
color: white;
font-family: monospace;
transition: rotate 5s linear; // плавный поворот
}
Чтобы создать впечатление, что стикер зафиксирован магнитом именно сверху, укажем у transform-origin значение top. Вы увидите как работает данное свойство, при наведении мыши на объект.
.sticker_move:hover {
transform: rotate(10deg); // поворот на 10 градусов
transform-origin: top;
}
Уже хорошо освоив HTML/CSS, можно выходить на фриланс биржи. Основываясь на своем личный опыт, я записал полезное видео по Заработку на создании сайтов под заказ.
-
Создано 24.04.2020 10:34:56
-
Михаил Русаков
Комментарии (0):
Для добавления комментариев надо войти в систему.
Если Вы ещё не зарегистрированы на сайте, то сначала зарегистрируйтесь.