JSFiddle - React, Tailwind, and code Playground

by Tan

HTML

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>

<div class="anim-cont">
<div class="anim" id="amin">
<a href="#" onClick="move();">hello</a>
</div>
</div>

CSS

body {margin:0;}

.anim-cont {position:relative;width:300px;height:300px;overflow:hidden;}

.anim {position:absolute;width:300px;height:300px;background-color:#999;text-align:center;
-webkit-transform-origin: 50% 100%;
-moz-transform-origin: 50% 100%;
-ms-transform-origin: 50% 100%;
-o-transform-origin: 50% 100%;
transform-origin: 50% 100%;
transform: rotate(20deg);
    -webkit-transform: rotate(20deg);
        transition: all 1s;}
        
        .anim2 {position:absolute;width:300px;height:300px;background-color:#999;text-align:center;
-webkit-transform-origin: 50% 100%;
-moz-transform-origin: 50% 100%;
-ms-transform-origin: 50% 100%;
-o-transform-origin: 50% 100%;
transform-origin: 50% 100%;
transform: rotate(-20deg);
    -webkit-transform: rotate(-20deg);
        transition: all 1s;}

figure {
  position: relative;
  display: inline-block;
 }
  .graph {
    width: 300px;
  }
  .needle {
    position: absolute;
    width: 160px;
    right: 15px;
    bottom: -28px;
    transform: rotate(-171deg);
    transform-origin: left;
    -webkit-transform: rotate(-171deg);
    transition: all 1s;
  }
  
    .needle2 {
    position: absolute;
    width: 160px;
    right: 15px;
    bottom: -28px;
    transform: rotate(-180deg);
    -webkit-transform: rotate(-180deg);
    transition: all 1s;
  }

JavaScript

function move() {
    
var el = document.getElementById('anim');
if(el.className == "anim2"){
		el.className = "anim";
	} else {
		el.className = "anim2";
	}

  }