Javascript, как мне повернуть мой div div?

Мне еще нужно создать раскрывающуюся часть, но я хочу, чтобы у меня была стрелка, которую я создаю при нажатии. Вот мой код уже. Все, что я пытаюсь сделать, когда я выбираю div, я не получаю никаких действий.Javascript, как мне повернуть мой div div?

$(document).ready(function() { 
 
    $('.circle').click(function() { 
 
     $('#rotate').toggleClass('rotated'); 
 
    }); 
 
});

.header{ 
 
    margin: -8px; 
 
    height:75px; 
 
    background-color: rgba(222,70,82,.7); 
 
} 
 
.circle{ 
 
    width:40px; 
 
    height:40px; 
 
    border-radius:60px; 
 
    border: solid 3px white; 
 
    position: absolute; 
 
    left: 200px; 
 
    top:18px; 
 
} 
 
.circle2{ 
 
    width:30px; 
 
    height:30px; 
 
    top: 3px; 
 
    left: 3px; 
 
    border-radius:60px; 
 
    border: solid 2px white; 
 
    position: absolute; 
 
} 
 

 
.arrow{ 
 
content:''; 
 
    display:block; 
 
    position:relative; 
 
    top:6px; 
 
    left:4px; 
 
    height:15px; 
 
    width:15px; 
 
-webkit-border-radius: 4px; 
 
    -moz-border-radius: 4px; 
 
    border-radius: 4px; 
 
    border-top:4px solid white; 
 
    border-right:4px solid white; 
 
    -webkit-transform:rotate(45deg); 
 
    -moz-transform:rotate(45deg); 
 
    -ms-transform:rotate(45deg); 
 
    -o-transform:rotate(45deg); 
 
    transform:rotate(45deg); 
 
    -webkit-transition: all 0.3s ease-in-out; 
 
    -moz-transition: all 0.3s ease-in-out; 
 
    -o-transition: all 0.3s ease-in-out; 
 
    transition: all 0.3s ease-in-out; 
 
} 
 

 
.rotated{ 
 
    transform:rotate(25deg); 
 
    -webkit-transform:rotate(25deg); 
 
    -moz-transform:rotate(25deg); 
 
    -o-transform:rotate(25deg); 
 
}

<header class = "header"> 
 

 
    <div class ="circle" > 
 
    <div class = "circle2" 
 
     </div>  
 
    
 
    <div class = "arrow"id="rotate"></div> 
 
    </div></header>

источник

2014-10-13 Mike

Вы забыли добавить JQuery? ('') – Kaiido

^^ Должно быть. Хорошо работает для меня - http://jsfiddle.net/rth94prt/ – jleggio

Если вы добавите jQuery, как указывает Кайдо, стрелка начнет вращаться, когда вы нажмете на нее. Небольшая корректировка свойства преобразования повернутого класса, и он будет работать: «transform: rotate (135deg) translateX (-2px)» – ncardeli

Работа после изменения преобразования в 135deg.

Модифицированный CSS

.rotated{ 
    transform:rotate(135deg); 
    -webkit-transform:rotate(135deg); 
    -moz-transform:rotate(135deg); 
    -o-transform:rotate(135deg); 
    margin-left: 1px; 
}

http://jsfiddle.net/d08367ok/

источник

2014-10-13 18:57:38

Javascript, как мне повернуть мой div div?

ответ

Смежные вопросы