I am attempting to make the boxes in my grid flip over with a button click. With pure CSS3, I can make the animation work with hover. My javascript doesn't work at all. My aim is to trigger this CSS animation by using a button click that calls a function in javascript. Thank you for any help that is offered. Here is my code:
<html>
<head>
<meta charset="utf-8">
<title>Sudoku Grid Attempt</title>
<style type="text/css">
#sudoku{
position:relative;
top:150px;
left:150px;
background-color:#666699;
height:800px;
width:800px;
font-family:Lucida Console monospace;
size:1px;
}
.grid{
position:relative;
top:65px;
left:65px;
width:42px;
height:42px;
float:left;
}
.square{
text-align:center;
height:2.6em;
width:2.6em;
}
.square>.front{
position:absolute;
height:2.6em;
width:2.6em;
border-style:solid;
border-width:3px;
border-color:black;
background-color:#ff6600;
transform:perspective(600px) rotateY(0deg);
backface-visibility:hidden;
transition:transform .5s linear 0s;
}
.square>.back{
position:absolute;
height:2.6em;
width:2.6em;
border-style:solid;
border-width:3px;
border-color:black;
background-color:#ff0066;
transform:perspective(600px) rotateY(180deg);
backface-visibility:hidden;
transition:transform .5s linear 0s;
}
/*.square:hover>.front{
transform:perspective(600px) rotateY(-180deg);
}*/
/*.square:hover>.back{
transform:perspective(600px) rotateY(0deg);
}*/
.frontSide{
transform:perspective(600px) rotateY(-180deg);
}
.backSide{
transform:perspective(600px) rotateY(0deg);
}
.button{
height:70px;
width:90px;
border-radius:70px 70px 70px 70px;
border-color:#ff3300;
background-color:#ff3300;
position:relative;
top:600px;
left:-300px;
}
</style>
<script>
document.getElementsByClassName("button").addEventListener("click",flipSide,false);
function flipSide(){
var elem = document.getElementsByClassName("square");
var elemF = document.getElementsByClassName("front");
var elemB = document.getElementsByClassName("back");
var efs = document.getElementsByClassName("frontSide");
var ebs = document.getElementsByClassName("backSide");
elem.elemF += "efs";
elem.elemB += "ebs";
}
</script>
</head>
<body>
<div id="sudoku">
<div class="grid">
<div class="square">
<div class="front">1</div>
<div class="back">2</div>
</div>
<div class="square">
<div class="front">3</div>
<div class="back">4</div>
</div>
<div class="square">
<div class="front">5</div>
<div class="back">6</div>
</div>
<div class="square">
<div class="front">7</div>
<div class="back">8</div>
</div>
<div class="square">
<div class="front">9</div>
<div class="back">10</div>
</div>
<div class="square">
<div class="front">11</div>
<div class="back">12</div>
</div>
<div class="square">
<div class="front">13</div>
<div class="back">14</div>
</div>
<div class="square">
<div class="front">15</div>
<div class="back">16</div>
</div>
<div class="square">
<div class="front">17</div>
<div class="back">18</div>
</div>
</div>
<div class="grid">
<div class="square">
<div class="front"></div>
<div class="back"></div>
</div>
<div class="square">
<div class="front"></div>
<div class="back"></div>
</div>
<div class="square">
<div class="front"></div>
<div class="back"></div>
</div>
<div class="square">
<div class="front"></div>
<div class="back"></div>
</div>
<div class="square">
<div class="front"></div>
<div class="back"></div>
</div>
<div class="square">
<div class="front"></div>
<div class="back"></div>
</div>
<div class="square">
<div class="front"></div>
<div class="back"></div>
</div>
<div class="square">
<div class="front"></div>
<div class="back"></div>
</div>
<div class="square">
<div class="front"></div>
<div class="back"></div>
</div>
</div>
<div class="grid">
<div class="square">
<div class="front"></div>
<div class="back"></div>
</div>
<div class="square">
<div class="front"></div>
<div class="back"></div>
</div>
<div class="square">
<div class="front"></div>
<div class="back"></div>
</div>
<div class="square">
<div class="front"></div>
<div class="back"></div>
</div>
<div class="square">
<div class="front"></div>
<div class="back"></div>
</div>
<div class="square">
<div class="front"></div>
<div class="back"></div>
</div>
<div class="square">
<div class="front"></div>
<div class="back"></div>
</div>
<div class="square">
<div class="front"></div>
<div class="back"></div>
</div>
<div class="square">
<div class="front"></div>
<div class="back"></div>
</div>
</div>
<div class="grid">
<div class="square">
<div class="front"></div>
<div class="back"></div>
</div>
<div class="square">
<div class="front"></div>
<div class="back"></div>
</div>
<div class="square">
<div class="front"></div>
<div class="back"></div>
</div>
<div class="square">
<div class="front"></div>
<div class="back"></div>
</div>
<div class="square">
<div class="front"></div>
<div class="back"></div>
</div>
<div class="square">
<div class="front"></div>
<div class="back"></div>
</div>
<div class="square">
<div class="front"></div>
<div class="back"></div>
</div>
<div class="square">
<div class="front"></div>
<div class="back"></div>
</div>
<div class="square">
<div class="front"></div>
<div class="back"></div>
</div>
</div>
<div class="grid">
<div class="square">
<div class="front"></div>
<div class="back"></div>
</div>
<div class="square">
<div class="front"></div>
<div class="back"></div>
</div>
<div class="square">
<div class="front"></div>
<div class="back"></div>
</div>
<div class="square">
<div class="front"></div>
<div class="back"></div>
</div>
<div class="square">
<div class="front"></div>
<div class="back"></div>
</div>
<div class="square">
<div class="front"></div>
<div class="back"></div>
</div>
<div class="square">
<div class="front"></div>
<div class="back"></div>
</div>
<div class="square">
<div class="front"></div>
<div class="back"></div>
</div>
<div class="square">
<div class="front"></div>
<div class="back"></div>
</div>
</div>
<div class="grid">
<div class="square">
<div class="front"></div>
<div class="back"></div>
</div>
<div class="square">
<div class="front"></div>
<div class="back"></div>
</div>
<div class="square">
<div class="front"></div>
<div class="back"></div>
</div>
<div class="square">
<div class="front"></div>
<div class="back"></div>
</div>
<div class="square">
<div class="front"></div>
<div class="back"></div>
</div>
<div class="square">
<div class="front"></div>
<div class="back"></div>
</div>
<div class="square">
<div class="front"></div>
<div class="back"></div>
</div>
<div class="square">
<div class="front"></div>
<div class="back"></div>
</div>
<div class="square">
<div class="front"></div>
<div class="back"></div>
</div>
</div>
<div class="grid">
<div class="square">
<div class="front"></div>
<div class="back"></div>
</div>
<div class="square">
<div class="front"></div>
<div class="back"></div>
</div>
<div class="square">
<div class="front"></div>
<div class="back"></div>
</div>
<div class="square">
<div class="front"></div>
<div class="back"></div>
</div>
<div class="square">
<div class="front"></div>
<div class="back"></div>
</div>
<div class="square">
<div class="front"></div>
<div class="back"></div>
</div>
<div class="square">
<div class="front"></div>
<div class="back"></div>
</div>
<div class="square">
<div class="front"></div>
<div class="back"></div>
</div>
<div class="square">
<div class="front"></div>
<div class="back"></div>
</div>
</div>
<div class="grid">
<div class="square">
<div class="front"></div>
<div class="back"></div>
</div>
<div class="square">
<div class="front"></div>
<div class="back"></div>
</div>
<div class="square">
<div class="front"></div>
<div class="back"></div>
</div>
<div class="square">
<div class="front"></div>
<div class="back"></div>
</div>
<div class="square">
<div class="front"></div>
<div class="back"></div>
</div>
<div class="square">
<div class="front"></div>
<div class="back"></div>
</div>
<div class="square">
<div class="front"></div>
<div class="back"></div>
</div>
<div class="square">
<div class="front"></div>
<div class="back"></div>
</div>
<div class="square">
<div class="front"></div>
<div class="back"></div>
</div>
</div>
<div class="grid">
<div class="square">
<div class="front"></div>
<div class="back"></div>
</div>
<div class="square">
<div class="front"></div>
<div class="back"></div>
</div>
<div class="square">
<div class="front"></div>
<div class="back"></div>
</div>
<div class="square">
<div class="front"></div>
<div class="back"></div>
</div>
<div class="square">
<div class="front"></div>
<div class="back"></div>
</div>
<div class="square">
<div class="front"></div>
<div class="back"></div>
</div>
<div class="square">
<div class="front"></div>
<div class="back"></div>
</div>
<div class="square">
<div class="front"></div>
<div class="back"></div>
</div>
<div class="square">
<div class="front"></div>
<div class="back"></div>
</div>
</div>
<button class="button">Solution</button>
</div>
</body>
</html>
Aucun commentaire:
Enregistrer un commentaire