<MyRusakov.ru />

Финансовая грамотность от А до Я

Финансовая грамотность от А до Я

Данный курс в кратчайшие сроки обучит Вас финансовой грамотности. Эти знания позволят Вам получить, как минимум, серьёзную финансовую стабильность, а, как максимум, финансовую независимость.

В рамках курса даётся большое количество практических заданий, благодаря которым Вы не просто посмотрите курс, а действительно выполните ряд важнейших шагов, о которых в нём говорится.

Помимо самого курса Вас ждёт ещё бесплатный ценный Бонус: «Ранний выход на пенсию». В рамках этого Бонуса Вы узнаете, какой должен быть капитал конкретно в Вашем случае, варианты его получения, а также какие есть стратегии вывода капитала на пенсии и где их можно протестировать.

Подробнее
Подписка

Подпишитесь на мой канал на YouTube, где я регулярно публикую новые видео.

YouTube Подписаться

Подписавшись по E-mail, Вы будете получать уведомления о новых статьях.

Подписка Подписаться

Добавляйтесь ко мне в друзья ВКонтакте! Отзывы о сайте и обо мне оставляйте в моей группе.

Мой аккаунт Мой аккаунт Моя группа
Опрос

Какая тема Вас интересует больше?

Свойство transform-origin на примере

Свойство transform-origin на примере

CSS свойство transform-origin позволяет задать местоположение точки, относительно которой происходит трансформация (смещение, деформация, вращение, масштабирование) элемента. По умолчанию значение свойства transform-origin равно center, поэтому все действия происходят относительно центра.

transform-origin: center;

Но что делать, если нам нужно задать точку фиксации в другом месте? Сейчас мы рассмотрим на примере стикера, условно зафиксированного сверху магнитом к холодильнику.

Свойство transform-origin на примере.

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>

Свойство transform-origin на примере.

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; // родитель для магнита
}

Свойство transform-origin на примере.

Нарисуем небольшой магнит с помощью псевдоэлемента 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;
}

Свойство transform-origin на примере.

Обратите внимание, что высота у голубого блока на 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 на примере.

Чтобы создать впечатление, что стикер зафиксирован магнитом именно сверху, укажем у transform-origin значение top. Вы увидите как работает данное свойство, при наведении мыши на объект.

.sticker_move:hover {
    transform: rotate(10deg); // поворот на 10 градусов
    transform-origin: top;
}


Уже хорошо освоив HTML/CSS, можно выходить на фриланс биржи. Основываясь на своем личный опыт, я записал полезное видео по Заработку на создании сайтов под заказ.

Копирование материалов разрешается только с указанием автора (Михаил Русаков) и индексируемой прямой ссылкой на сайт (http://myrusakov.ru)!

Добавляйтесь ко мне в друзья ВКонтакте: http://vk.com/myrusakov.
Если Вы хотите дать оценку мне и моей работе, то напишите её в моей группе: http://vk.com/rusakovmy.

Если Вы не хотите пропустить новые материалы на сайте,
то Вы можете подписаться на обновления: Подписаться на обновления

Если у Вас остались какие-либо вопросы, либо у Вас есть желание высказаться по поводу этой статьи, то Вы можете оставить свой комментарий внизу страницы.

Порекомендуйте эту статью друзьям:

Если Вам понравился сайт, то разместите ссылку на него (у себя на сайте, на форуме, в контакте):

  1. Кнопка:

    Она выглядит вот так: Как создать свой сайт

  2. Текстовая ссылка:

    Она выглядит вот так: Как создать свой сайт

  3. BB-код ссылки для форумов (например, можете поставить её в подписи):

Комментарии (0):

Для добавления комментариев надо войти в систему.
Если Вы ещё не зарегистрированы на сайте, то сначала зарегистрируйтесь.