Skip to content

Instantly share code, notes, and snippets.

/index.html

Created February 6, 2018 19:40
Show Gist options
  • Save anonymous/980963b921f168920a99b2099e14db9c to your computer and use it in GitHub Desktop.
Save anonymous/980963b921f168920a99b2099e14db9c to your computer and use it in GitHub Desktop.
Download ZIP
JS Bin // source https://jsbin.com/xuqurakipi
Raw
index.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>JS Bin</title>
<style id="jsbin-css">
html, body {
margin: 0;
padding: 0;
height: 100%;
}
body {
perspective: 800;
}
.card {
font-family: sans-serif;
width: 100%;
height: 100%;
position: absolute;
transform-style: preserve-3d;
transition: transform 1s;
}
.card .content {
color: white;
font-size: 10em;
display: inline-block;
width: 100%;
text-align: center;
padding-top: 40%;
height: 80%;
width: 80%;
left: 10%;
position: absolute;
border-radius: 20px;
backface-visibility: hidden;
}
.card .content.front {
background: steelblue;
}
.card .content.back {
background: lightgreen;
transform: rotateY(180deg);
}
.card.flipped {
transform: rotateY(180deg);
}
</style>
</head>
<body>
<div class="card">
<div class="content front">も</div>
<div class="content back">Mo</div>
</div>
<script id="jsbin-javascript">
var card = document.querySelector(".card");
card.addEventListener("click", (e)=>{
card.classList.toggle("flipped");
});
</script>
<script id="jsbin-source-css" type="text/css">html,body{
margin: 0;
padding: 0;
height: 100%;
}
body{
perspective: 800;
}
.card{
font-family: sans-serif;
width: 100%;
height: 100%;
position: absolute;
transform-style: preserve-3d;
transition: transform 1s;
.content{
color: white;
font-size: 10em;
display: inline-block;
width: 100%;
text-align: center;
padding-top: 40%;
height: 80%;
width: 80%;
left: 10%;
position: absolute;
border-radius: 20px;
backface-visibility: hidden;
&.front{
background: steelblue;
}
&.back{
background: lightgreen;
transform: rotateY( 180deg );
}
}
&.flipped{
transform: rotateY( 180deg );
}
}</script>
<script id="jsbin-source-javascript" type="text/javascript">var card = document.querySelector(".card");
card.addEventListener("click", (e)=>{
card.classList.toggle("flipped");
});</script></body>
</html>
Raw
jsbin.xuqurakipi.css
html, body {
margin: 0;
padding: 0;
height: 100%;
}
body {
perspective: 800;
}
.card {
font-family: sans-serif;
width: 100%;
height: 100%;
position: absolute;
transform-style: preserve-3d;
transition: transform 1s;
}
.card .content {
color: white;
font-size: 10em;
display: inline-block;
width: 100%;
text-align: center;
padding-top: 40%;
height: 80%;
width: 80%;
left: 10%;
position: absolute;
border-radius: 20px;
backface-visibility: hidden;
}
.card .content.front {
background: steelblue;
}
.card .content.back {
background: lightgreen;
transform: rotateY(180deg);
}
.card.flipped {
transform: rotateY(180deg);
}
Raw
jsbin.xuqurakipi.js
var card = document.querySelector(".card");
card.addEventListener("click", (e)=>{
card.classList.toggle("flipped");
});
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment