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

Libiros · July 26, 2017

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

Верстаю макет на 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 ...

Как быть?

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

Svetlana_P · July 27, 2017

1 час назад, Libiros сказал:

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

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

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

Libiros · July 27, 2017

Ребята, помогите. Так и не решил проблему эту.

Igor Schnaider · July 27, 2017

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

Libiros · July 27, 2017

1 час назад, Igor Schnaider сказал:

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

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

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

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

Edited July 27, 2017 by Libiros

Svetlana_P · July 27, 2017

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

Libiros · July 27, 2017

2 часа назад, Svetlana_P сказал:

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

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

Libiros · July 27, 2017

28 минут назад, Svetlana_P сказал:

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

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

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

Svetlana_P · July 27, 2017

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

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

Sign In

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

Question

Libiros

Link to comment

Share on other sites

8 answers to this question

Recommended Posts

Svetlana_P

Link to comment

Share on other sites

Libiros

Link to comment

Share on other sites

Igor Schnaider

Link to comment

Share on other sites

Libiros

Link to comment

Share on other sites

Svetlana_P

Link to comment

Share on other sites

Libiros

Link to comment

Share on other sites

Libiros

Link to comment

Share on other sites

Svetlana_P

Link to comment

Share on other sites

Join the conversation

Similar Content

Обсуждения

Forums

Important Information