Advertisement
Not a member of Pastebin yet?
Sign Up,
it unlocks many cool features!
- <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>
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement