Po kliku div się obraca o 360 stopni

pytanie zadane 14 grudnia 2015 w JavaScript przez tirex Gaduła (4,430 p.)

czesc,

Mam na stronie trzy img.

Jak zrobić animacje ,żeby po kliku się obracała o 360 stopni?

2 odpowiedzi

odpowiedź 15 grudnia 2015 przez Czort Nałogowiec (32,500 p.)
wybrane 25 stycznia 2016 przez tirex

Najlepsza

Coś takiego może

http://jsfiddle.net/3e4m3zvg/1/

Edit: bez jquery coś takiego posklejałem http://jsfiddle.net/3e4m3zvg/7/ , jak jest jakiś spec od js niech mnie poprawi . classList.add jest chyba lepsze od className, ale pewności nie mam.

komentarz 15 grudnia 2015 przez tirex Gaduła (4,430 p.)

Malina:).

A co zrobić ,zeby po obrocie np:o 180 stopni pojawil się tekst na tym divie.

Nastepnie po kliku wrócił do startowego ustawienia.:)

komentarz 15 grudnia 2015 przez Czort Nałogowiec (32,500 p.)

Na przykład drugi div z opacity:0 i tekstem na tej samej pozycji co obrazek i animacja opacity po kliknięciu. To jeden ze sposobów.

komentarz 15 grudnia 2015 przez tirex Gaduła (4,430 p.)

Coś u mnie nie chodzi to obrót:

częsc html z tą sekcją

Może źle podpinam?

<section id="projekty">
        <h1 class="title">Projekty</h1>
        <div class="container box">
            <div class="row">

                <div class="col-md-4 col-sm-4 col-xs-12">

                        <div class="verticalLine"></div>
                        <figure class="rotate-img relative" id="btn1"><img class="absolute " src="img/portfolio1.jpg" alt="portofolio1">
                        </figure>

                </div>

                <div class="col-md-4 col-sm-4 col-xs-12" style="margin-top:100px;">

    <div class="line"></div>
    <figure class="rotate-img relative " id="btn1"><img class="absolute" src="img/portfolio2.jpg" alt="portfolio2">
    </figure>

</div>

                <div class="col-md-4 col-sm-4 col-xs-12">

                        <div class="verticalLine downLine"></div>
                        <figure class="rotate-img relative margin" id="btn1" >
                        <img class="absolute" src="img/portfolio3.jpg" alt="portfolio3">
                        </figure>

                </div>
            </div>
        </div>
    </section>

komentarz 15 grudnia 2015 przez Czort Nałogowiec (32,500 p.)

Pewnie tak, ciężko stwierdzić po wycinku html. Jakbyś wrzucił na jsfiddle albo codepen to możliwe, że błąd się znajdzie.

komentarz 15 grudnia 2015 przez Czort Nałogowiec (32,500 p.)

To może spróbuj zamiast tego co wcześniej coś takiego:

CSS ten sam.

HTML ten sam ale dla każdego z 3 obrazków, które mają się obracać daj inne ID.

JS - w miejsce img1, img2, img3 wstaw swoje ID i spróbuj umieścić poniższy kod na końcu <body> między <script> </script>:

function obrot360(el) {
  if (el.attachEvent)
    return el.attachEvent('onclick', func);
  else
    return el.addEventListener('click', func, false);

  function func() {
    var that = this;
    that.classList.add("obrot");
    setTimeout(function() {
      that.classList.remove("obrot");
    }, 1000);
  }
}

obrot360(document.getElementById('img1'));
obrot360(document.getElementById('img2'));
obrot360(document.getElementById('img3'));