chris/main_web
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

animal

Browse Source
This commit is contained in:
chris 2022-01-21 10:46:22 -05:00
parent ae2542e3e0
commit 3ce6cdce41
3 changed files with 80 additions and 4 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

11
animal/index.html
View File

@ -7,10 +7,17 @@
<title>Animal Crossing Monopoly</title> <title>Animal Crossing Monopoly</title>
<link rel="stylesheet" href="style.css"> <link rel="stylesheet" href="style.css">
<link rel="stylesheet" href="../menu/menu.css"> <link rel="stylesheet" href="../menu/menu.css">
</head> </head>
<body> <body>
<main> <div id="container">
<div class="card">
<figure class="front"></figure>
<figure class="back"></figure>
</div>
</div>
</main> <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script src="script.js"></script>
</body> </body>
</html> </html>

22
animal/script.js
View File

@ -8,4 +8,24 @@ fish = [{
color: "light blue", color: "light blue",
value: "2", value: "2",
img: "" img: ""
}] }];
// Get the element
let elem = document.querySelector('.card');
// Update the ID and add a class
// clone.classList.add('text-large1');
// Inject it into the DOM
for (let i = 0; i < 100; i++){
// elem.after(clone);
let clone = elem.cloneNode(true);
elem.after(clone);
// elem.parentNode.appendChild(clone)
}
$('.card').on('click', function (e) {
e.preventDefault();
$(this).toggleClass('flipped');
});

49
animal/style.css
View File

@ -0,0 +1,49 @@
#container {
display: flex;
flex-direction: row;
justify-content: space-between;
align-content: center;
width: 100vw;
height: 100vh;
flex-wrap: wrap;
/* position: relative; */
perspective: 20000px;
margin:1rem;
/* margin: 20px auto; */
/* border-radius: 100px; */
}
.card {
width: 100px;
height: 100px;
display: flex;
/* position: absolute; */
transform-style: preserve-3d;
transition: transform .5s;
border-radius: 100px;
}
.card figure {
margin: 0;
padding: .5rem;
display: block;
position: absolute;
width: 100%;
height: 100%;
backface-visibility: hidden;
border-radius: 100px;
/* border-radius: 100px; */
}
.card .front {
background: lightseagreen
}
.card .back {
background: lightsalmon;
transform: rotateY(180deg);
}
.card.flipped {
transform: rotateY(180deg);
}