Search the Community
Showing results for tags 'rotate'.
Found 4 results
-
http://leveler.ru/i-icons/demo.html Cлепил из svg набор иконок в icomoon, приклеил анимацию вращения. Не вращается В найденном примере вроде всё так же. Но при этом - работает: https://codepen.io/Keyamoon/pen/aHxuq Что я сделал не так? UPD: не хватало display:inline-block;
-
Всем привет! Столкнулся со следующей проблемой: Верстаю макет на 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 ... Как быть? Сначала решил не прикреплять картинку, потом, все же, решил. Чтобы было нагляднее...
-
циклический rotate на n-градусов (jQuery) мозговлючающая задача
veremey posted a question in HTML Coding
Привет. У меня возникла проблема: Есть такой пентагон, который при клике на пункт меню поворачивается в его сторону https://yadi.sk/i/Xv1jCEZkghMH6 проблема в том, что пентагон должен крутиться по короткому пути к активному пункту. -
Ребят помогите разобраться почему не работает свойство rotate и как сделать что бы по клику на .list:after список выпадал? Заранее спасибо огромное скрин списка <!doctype html><html lang="en"><head> <meta charset="UTF-8"> <title>Document</title> <link rel="stylesheet" href="style.css"></head><body><div class="list"> <select name="lictsat" id="lictsat"> <option selected="Home">HomePage</option> <option value="firstchaild">firstchaild</option> <option value="firstchaild">firstchaild</option> <option value="firstchaild">firstchaild</option> <option value="firstchaild">firstchaild</option> <option value="firstchaild">firstchaild</option> <option value="firstchaild">firstchaild</option> <option value="firstchaild">firstchaild</option> </select></div> </body></html>* { margin: 0; padding: 0;}.list { margin: 50px;}.list select { padding: 6px 30px; color: #888; text-transform: uppercase; width: 185px; height:30px;}.list:after { content: "< >"; padding: 6px; margin: 0px -38px 0px; cursor:pointer; background: #eee; transform:rotate(90deg); -moz-transform:rotate(90deg); -o-transform:rotate(90deg); -webkit-transform:rotate(90deg);}
