Сообщение от рони
|
j0hnik,
ок. 
|
Рони, друг мой
я нашел еще более изящное решение
<!DOCTYPE html>
<html>
<head>
<title>Untitled</title>
<meta charset="utf-8">
<style>
table{
transition: 1s;
font-size: 22px;
margin: 20px;
}
td{
transition: 1s;
}
.active{
transform: rotateZ(-90deg) rotateY(180deg);
}
</style>
</head>
<body>
<div>
<table>
<tr><td>1<td>2<td>3
<tr><td>4<td>5<td>6
<tr><td>7<td>8<td>9
</table>
_______________________
<table>
<tr><td>1<td>2<td>3
<tr><td>4<td>5<td>6
</table>
</div>
<button>Клик</button>
</body>
<script>
document.querySelector('button').onclick = e => {
document.querySelectorAll('table').forEach(el=>el.classList.toggle('active'));
document.querySelectorAll('td').forEach(el=>el.classList.toggle('active'));
};
</script>
</html>
посмотрите на эту красоту!
