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

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

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

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now

  • Similar Content

    • By kask
      Подскажите какие стили нужно переопределить чтобы навигационная панель в navbar выезжала слева на право а не сверху вниз как определенно стандартно 
    • By Amaere
      Ищу ментора по веб-разработке. Готов работать бесплатно или платить за обучение. Главное, что бы я мог потом зарабатывать.
       
  • Member Statistics

    46,511
    Total Members
    3,128
    Most Online
    Marking
    Newest Member
    Marking
    Joined
  • Recently Browsing   0 members

    No registered users viewing this page.