Jump to content
  • Sign Up
Libiros

Свойство transform: rotate() для адаптивной верстки

Recommended Posts

Всем привет! Столкнулся со следующей проблемой:

Верстаю макет на Bootstrap и столкнулся с тем, что не получается нормально отпозиционировать элементы, имеющие, во-первых, свойство 

transform: rotate(-90deg);

во-вторых, абсолютное позиционирование для того, чтобы прилепить их к правому краю экрана.

Итак, вот исходный код файлов:

<!DOCTYPE html>
<html lang="ru">
<head>
<meta charset="utf-8">

    <link href="css/bootstrap.min.css" rel="stylesheet">
    <script src="js/jquery.min.js"></script>
<script src="js/bootstrap.js"></script>
<link rel="stylesheet" type="text/css" href="css/style.css">
<link rel="stylesheet" href="css/font-awesome.min.css">

<title>Туризм</title>
</head>
<body>
    <div class="container-fluid turism_main">
      
<div class="row">
  <div class="company-name">
      <p>LuckyFox</p>
      <p>Travel</p>
  </div>
  <div class="aside_main col-xs-12">
    <a href="#"><img src="img/afterparty.png" alt=""></a>
  </div>
</div>
   
    <div class="aside-content">
        <div class="aside-contact">
            <i class="fa fa-volume-control-phone" aria-hidden="true"></i> Связаться с нами
        </div>
        <div class="aside-mail">
            <i class="fa fa-envelope-o" aria-hidden="true"></i> Подписаться
        </div>
        <div class="aside-calendar">
            <a href="#">Календарь</a>
        </div>
        <div class="aside-lang">
            <span class="active">EN</span> / RU
        </div>
    </div>
                
    </div>
    
</body>
</html>

А вот здесь style.css:

.turism_main {
    background: gray;
    background-size: cover;
    height: 100vh;
    width: 100vw;
    color: #fff;
    position: relative;
}
.company-name {
    font-size: 2em !important;
    letter-spacing: 2px;
    opacity: .7;
    position: absolute;
    right: 45%;
    left: 45%;
    text-align: center !important;
    display: block;
    line-height: 1;
    margin-top: 15px;
    width: 200px;
}

.aside_main {
   text-align: right;
    padding: 0;
}

.aside-content {
    z-index: 999;
    position: absolute;
    right: -195px;
    top: 400px;
    transform: rotate(-90deg);
    font-size: .8em;
    background: black;
}

.aside-content div, .aside-content a{
    display: inline-block;
    color: white;
}
.aside-content i {
    padding-right: 10px;
    color: #e9ba02;
    font-weight: bold;
}
.aside-contact, .aside-mail {
    padding: 5px 10px 5px 10px;
    border: 1px solid white;
    margin-right: 20px;
}
.aside-calendar, .aside-lang {
    margin-left: 20px;
}

Не спрашивайте меня, почему я сделал кривую строку .row и засунул в нее эту ссылку справа. Изначально можно было сделать ее position: absolute, я так и сделал, но потом стал мучаться с сабжем и переделал, в надежде, что поможет.

Если вам потребуется вообще переделать напрочь весь .aside-*, то пожалуйста, лишь бы было понятно, почему вы это делаете. Потому что мне нужно понять.

И еще есть один вопрос:

Почему, когда я вписываю что-то в .aside-content , то он начинает ехать влево? Ведь у него не увеличивается ни длина, ни ширина. А если я увеличиваю width, например, то он тоже уезжает далеко...

Еще раз повторю задачу:

Нужно сделать так, чтобы весь блок .aside-content был прилеплен к правому краю и каким-то образом был адаптирован, если я уменьшаю экран по вертикали. В данный момент этот блок просто под .container-fluid ...

Как быть?

Сначала решил не прикреплять картинку, потом, все же, решил. Чтобы было нагляднее...

Без имени-4.jpg

Share this post


Link to post
Share on other sites
1 час назад, Igor Schnaider сказал:

Вы бы пример собрали в песочнице.

Вот песочница: https://jsfiddle.net/wx294s22/

Соответственно мы видим правый блок, который перевернут - он выезжает за края серого фона, а я бы хотел, чтобы он просто сжимался и уходил на 2-3-4 строки, вместо одной.

И также можно попробовать вписать что-то в этот блок. С каждой буквой он уезжает все дальше.

Edited by Libiros

Share this post


Link to post
Share on other sites
2 часа назад, Svetlana_P сказал:

Картинка не подцепилась в песочнице. Доработайте пример, попробую помочь!

Там картинка не играет роли, это просто выдержка из моего документа. Можно без нее.

Share this post


Link to post
Share on other sites
1 час назад, Libiros сказал:

Там картинка не играет роли, это просто выдержка из моего документа. Можно без нее.

Всё посмотрела. К сожалению, мне сложновато понять вопрос :( Отвечу, как поняла.

У Вас не получается повернутый блок прилепить к правому краю. Решение вот https://jsfiddle.net/Benedetta/xohao506/3/ Т.е. сначала поднимаете блок на высоту, равную самому себе, а потом поворачиваете его на нужный угол вокруг правого нижнего угла. Неважно, какого размера будет контент внутри или окно.

 

 

Share this post


Link to post
Share on other sites
28 минут назад, Svetlana_P сказал:

Всё посмотрела. К сожалению, мне сложновато понять вопрос :( Отвечу, как поняла.

У Вас не получается повернутый блок прилепить к правому краю. Решение вот https://jsfiddle.net/Benedetta/xohao506/3/ Т.е. сначала поднимаете блок на высоту, равную самому себе, а потом поворачиваете его на нужный угол вокруг правого нижнего угла. Неважно, какого размера будет контент внутри или окно.

 

 

Благодарю. Вариант рабочий! Но почему так? Хочу понять. Какая разница по сравнению с тем, что я сделал самостоятельно? Почему у меня не работает, а у вас очень даже?

Share this post


Link to post
Share on other sites

Разница в точке, вокруг которой происходит поворот. Вы ее специально никак не указывали. А я указала.

Как повернуть на 270 градусов, но при этом оставить блок "прилепленным" к правому краю? Для этого я сместила блок повыше на 100% сначала через translateX. Потом свойством transform-origin указала, что повернуть надо вокруг нижнего правого угла уже сдвинутого блока. И получилось как надо. Вы понимаете? В трансформациях важен порядок, в котором они указаны. Здесь — сначала сдвиг, потом поворот. Почитайте про свойства, которые я упомянула, и поиграйтесь с их разными значениями и порядком.

Share this post


Link to post
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.


  • Similar Content

    • By shumz
      Задача: Создать линию определённых размеров и расположить её по центру экрана.
      Код HTML: 
      <div class="line"></div>
      Код CSS:
      .line {
          position:absolute
          margin-top:650px;
          height:2px;
          width:1200px;
          background: black;
      }
    • By РоманФ
      Здравствуйте клиент хочет чтобы картинка была сверстанна полностью именно на html css, кто то сталкивался c такой проблемой? возможно есть советы по тому как это сделать правильно.
      Волна по центру и все остальные вещи должны быть заверстанны в том числе.Интересует как это сделать с минимумом костылей.
      И остро стоит вопрос чтобы это все дело было адаптивно.
      На данный момент все что смог сделать https://jsfiddle.net/RomanFF/jL9swq7h/37/ с border нормальный сделать смогу, не понимаю принцип по которому мне все сопоставить так чтобы не полетело все потом,  мне хотябы общие принципы объяснить в каком направлении дальше двигаться

    • By Five
      Как можно поднять фиолетовый блок (находится в MAIN) вверх , чтобы он заполнил верхнюю прозрачную часть заднего плана HEADER-а?
      Свое образный переход будет... 

  • Member Statistics

    46,841
    Total Members
    1,451
    Most Online
    SkyMasteer
    Newest Member
    SkyMasteer
    Joined
  • Recently Browsing   0 members

    No registered users viewing this page.

  • Спрашивают сейчас

  • Пишут сейчас

    • Облако в помощь: как облачные технологии помогают известным компаниям Ценным опытом нужно делиться, особенно – опытом успешного использования облачных сервисов. Начнем с опыта компаний, чьи товары и услуги на слуху по всему миру. Поговорим о тех, кто внедрил облачные технологии (или планирует это сделать) и выгодно использует свое облачное преимущество над конкурентами.   Немного истории   Люди грезили облаками всегда. И если в буквальном смысле их покорение далось человечеству еще в 18 веке (спасибо братьям Монгольфье), то в интересующем нас значении все произошло много позже.   Ждать пришлось более двух столетий. Да, «облачные» идеи провозглашались еще в 50-х годах 20 века, задолго до появления интернета, но впервые по-настоящему материализовались лишь в 1999 году. Тогда компания Salesforce начала давать пользователям доступ к своим вычислительным ресурсам через веб-сайт. Новинка разлеталась как горячие пирожки, поэтому скоро похожими решениями обзавелись гиганты – Amazon, Google, IBM и Microsoft.   Облако на колесах   Компьютерам, как известно, уже давно не сидится в офисах – добрались они и до автопромышленности, причем много лет назад. А где компьютеры, там и до облака рукой подать. Одними из первых это смекнули в компании Volvo и приступили к созданию умного автомобиля нового поколения. А работать он будет вот как: автомобиль во время движения фиксирует все потенциальные опасности (скользкий участок трассы, яма, авария, обломок дерева и т.д.) и передает их в облачную базу данных, откуда эта информация транслируется на все автомобили, которые приближаются к опасному отрезку пути. Если Volvo успеет внедрить эту технологию раньше всех, то наверняка покорит сердца еще большего количества автолюбителей, в частности тех, кому безопасность на дороге превыше всего.       Финансы В банковском деле вопрос безопасности тоже стоит далеко не на последнем месте. Это, а еще желание опередить конкурентов в плане производительности привело в облака мировых гигантов банковского дела: BBVA, Goldman Sachs, Capital One и других. За признанными авторитетами подтягиваются организации поменьше – облачные технологии становятся трендом среди банкиров.   В Украине процесс виртуализации хоть и отстает немного, но на месте не стоит. Не так давно экс-топы ПриватБанка анонсировали запуск осенью 2017 года первого в стране мобильного банка без физических отделений. Сами разработчики обещают, что приложение будет даже круче, чем Приват24. Ждем.   Умный дом…   Технологии умного дома стремительно обретают популярность по всему миру. Активнее всего их внедряют в США, Китае и Германии. Суть следующая – в доме подключаются датчики и устройства, которые связывают между собой все электроприборы и позволяют управлять ими с помощью одного пульта или даже смартфона. Чтобы хранить и обрабатывать весь массив информации, пользователю, по логике, нужен мощный компьютер, что сказывается на стоимости такого решения. Выход нашелся довольно быстро – обрабатывать информацию в вычислительном облаке, что позволило снизить затраты на умный дом, подняв тем самым его популярность.   Если полноценный умный дом не по карману, то можно выбрать его «упрощенные», бюджетные версии. В частности, компания Xiaomi со своим Smart Home Kit предложила автоматизировать основные процессы в доме по доступной цене, чем значительно повысила свой авторитет на рынке.   …да и город не дурак   Если построить рядом много умных домов, получится умный город? Ну, почти. :) Умный город – это еще и интеллектуальные системы общественного транспорта, виртуальные очереди в поликлинику и городские службы, централизованная система проката велосипедов и автомобилей и много других по-настоящему классных и нужных решений. Среди европейских городов такие системы частично реализованы в Париже, Мадриде, Барселоне, Лондоне.   Не отстает Китай. Так, власти административного района Макао (или, как его еще называют, «Китайский Лас-Вегас») заключили соглашение на внедрение облачных технологий с компанией Alibaba. Уже через 4 года Макао превратится в умный город с развитой ИТ-инфраструктурой.   На этом, пожалуй, пока сделаем паузу. Впишите и свое имя в список великих, прихватив с собой облако на удачу. Не знаете, с чего начать? Обращайтесь к нам за грамотной консультацией, мы рады вам 24х7.    
    • По указанному адресу убрал, проблема осталась
    • Здравствуйте. Уберите строку следующую строку в файле "wp-content/themes/yoo_nano2_wp-child/style.css" *{ box-sizing: border-box; }  
  • Popular Contributors

×
×
  • Create New...