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

[Artur_Hopf]

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

<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>


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

[Artur_Hopf]

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

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;
}
}