Как правильно использовать css transform
 

Добрый день. Есть такой вот блок:

<div id="graph">
      <canvas class="card shadow" id="chart" width="820" height="600"></canvas>
</div>

Необходимо сделать анимацию при нажатии кнопку, переворота. Как будто написанная на обороте информация отображается после переворота.
Вот тут квадратик при наведении то что нужно:

https://css3playground.com/3d-flip-cards/

Сам я написал вот такую байду. Но это странно отрабатывает, но отрабатывает =)

<style type="text/css">
   .shadow{ 
    border: 1px solid black;
    background: #fc3;
    width="100"; 
    height="100";
   }
  </style>
<div id="graph">
     <canvas class="card shadow" id="chart" width="100" height="100"></canvas>
</div>
<button id="weightTransform">Перевернуть</button>
<script>
var weightTransform = document.getElementById("weightTransform"),
chart = document.getElementById("chart"),
check = 0;

weightTransform.onclick = function() {
     if(check == 0){
        chart.style.transform = 'scaleX(-1)';
        chart.style.transition = 'all 0.7s ease-in-out';
        setTimeout(function() { 
                    createTable();
                }, 700);
       check = 1;
     }else{
         graph.style.transform = 'scaleX(-1)';
         graph.style.transition = 'all 0.7s ease-in-out';
         setTimeout(function() { 
              graph.innerHTML = '<canvas class="card shadow graph-transform" id="chart" width="100" height="100"></canvas>';
              graph.style.transform = 'scaleX(+1)';
         }, 700);
         check = 0;
     }
}

function createTable(){
    var result = '',
    table = '<table class="table table-sm table-bordered text-center">'
                +'<thead class="thead-dark">'
                    +'<tr>'
                        +'<th>1</th>'
                        +'<th>2</th>'
                        +'<th>3</th>'
                    +'</tr>'
                +'</thead>'
            +'</table>';
            result += '<div class="shadow weight-table">'+table+'</div>';
            graph.innerHTML = result;
}

</script>

В общем не то что надо. Подскажите как правильно?

Разобрался, нужно было просто добавлять класс =)

var hover = document.getElementById("hover"),
chech = 0;

hover.onclick = function() {
    if(chech == 0){
	this.classList.add("flip");
	chech = 1;
    }else{
	this.classList.remove("flip");
	chech = 0;
     }
}