Skip to content

Instantly share code, notes, and snippets.

@neno-tech

neno-tech/index.html

Last active January 3, 2022 08:07
Show Gist options
  • Save neno-tech/9de7879e07af1c44ba10c954100fdbbe to your computer and use it in GitHub Desktop.
Save neno-tech/9de7879e07af1c44ba10c954100fdbbe to your computer and use it in GitHub Desktop.
Download ZIP
โค้ดทำพลิกภาพ cardflip
Raw
index.html
<!DOCTYPE html>
<html>
<head>
<base target="_top">
<style>
body{
height: 100vh;
display: flex;
justify-content: center;
align-items: center;
background: #222;
}
.card{
height: 388px;
width: 300px;
position: relative;
transition: all 1s linear;
transform-style: preserve-3d;
}
.front,
.back{
height: 100%;
width: 100%;
display: flex;
justify-content: center;
align-items: center;
font-size: 3em;
border-radius: 10px;
position: absolute;
}
.front{
background: #2af598;
z-index: 2;
backface-visibility: hidden;
}
.back{
background: #ff5acd;
z-index: 1;
transform: rotateY(180deg);
}
.container:hover .card{
transform: rotateY(180deg);
}
.container{
perspective: 1000px;
}
</style>
</head>
<body>
<div class="container">
<div class="card">
<div class="front">ด้านหน้า</div>
<div class="back">ด้านหลัง</div>
</div>
</div>
</body>
</html>
Raw
index2.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<!-- <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css"> -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css" integrity="sha512-Fo3rlrZj/k7ujTnHg4CGR2D7kSs0v4LLanw2qksYuRlEzO+tcaEPQogQ0KaoGN26/zrn20ImR1DfuLWnOo7aBA==" crossorigin="anonymous" referrerpolicy="no-referrer" />
<link href="https://fonts.googleapis.com/css?family=Prompt:300,300i,400,400i,700i" rel="stylesheet">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<!-- jQuery library -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<!-- Latest compiled JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<style>
body {
font-size: 16px;
line-height: 22px;
color: #555;
background: #222;
font-weight: 300;
text-shadow: rgba(0,0,0,.01) 0 0 1px;
font-family: 'Prompt';
overflow-x: hidden;
background-size: cover;
}
#section-feature ul {
margin: 100px 0 0 0;
padding: 0;
list-style: none;
position: relative;
}
#section-feature li {
box-sizing: border-box;
position: relative;
height: 380px;
padding: 2%;
float: left;
margin-bottom: 40px;
user-select: none;
}
#section-feature .sf-wrap {
background-repeat: no-repeat;
position: absolute;
max-width: 280px;
width: 100%;
height: 100%;
left: 50%;
margin-left: -140px;
top: 0;
perspective: 600px;
cursor: pointer;
}
.sf-mdl-left,
.sf-mdl-right,
.sf-mdl-left-full,
.sf-mdl-right-full {
position: absolute;
left: 0;
top: 0;
width: 50%;
height: 100%;
transition: all .5s;
overflow: hidden;
}
.sf-icon {
position: absolute;
top: 90px;
text-align: center;
width: 100%;
left: 0;
width: 200%;
color: #00B0F0;
}
.sf-mdl-left-full .sf-icon,
.sf-mdl-right-full .sf-icon {
color: #fff;
}
.sf-mdl-right,
.sf-mdl-right-full {
left: auto;
right: 0;
}
.sf-mdl-left-full,
.sf-mdl-right-full {
background-color: #00B0F0;
z-index: 9;
color: #fff;
}
.sf-wrap a {
color: #fff;
text-decoration: none;
margin-top: 110px;
}
.sf-mdl-left,
.sf-mdl-right {
background-color: #fff;
z-index: 10;
}
.sf-wrap > .sf-mdl-right-full,
.sf-wrap > .sf-mdl-right {
background-position: right -30px;
}
.sf-wrap > .sf-mdl-right,
.sf-wrap > .sf-mdl-left-full {
backface-visibility: hidden;
transform-style: preserve-3d;
transform-origin: 0 0;
transform: rotateY(0deg);
}
.sf-wrap.hover > .sf-mdl-right {
transform: rotateY(-45deg);
background-color: #ececec;
}
.sf-wrap > .sf-mdl-left-full {
transform-origin: 100% 0;
transform: rotateY(180deg);
}
.sf-wrap.active > .sf-mdl-right,
.sf-wrap.hover.active > .sf-mdl-right {
transform: rotateY(-180deg);
}
.sf-wrap.active > .sf-mdl-left-full {
transform: rotateY(0deg);
}
.active .sf-mdl-left-full,
.active .sf-mdl-right-full {
z-index: 11;
}
.sf-wrap div h3 {
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
font-size: 22px;
}
.sf-wrap div h3,
.sf-wrap div p {
width: 200%;
position: absolute;
text-align: center;
left: 0;
top: 190px;
}
.sf-wrap div p {
padding: 0 10%;
line-height: 18px;
font-size: 14px;
top: 180px;
}
.sf-wrap div.sf-mdl-right h3,
.sf-wrap div.sf-mdl-right-full h3,
.sf-wrap div.sf-mdl-right p,
.sf-wrap div.sf-mdl-right-full p,
.sf-mdl-right .sf-icon,
.sf-mdl-right-full .sf-icon
{
left: auto;
right: 0;
}
.sf-wrap div.sf-mdl-left-full h3,
.sf-wrap div.sf-mdl-right-full h3 {
top: 175px;
}
p{
margin-top: 55px;
}
a{
margin-top: 50px;
}
</style>
</head>
<body>
<br><br><br><br><br>
<section id="section-feature" class="container">
<div class="row">
<ul>
<li id="sf-innovation" class="col-md-3 col-sm-6 col-xs-12">
<div class="sf-wrap">
<div class="sf-mdl-left">
<div class="sf-icon">
<i class="fas fa-question-circle fa-5x"></i>
</div>
<h3>คำถามที่ 1</h3>
</div>
<div class="sf-mdl-right">
<div class="sf-icon">
<i class="fas fa-question-circle fa-5x"></i>
</div>
<h3>คำถามที่ 1</h3>
</div>
<div class="sf-mdl-left-full">
<div class="sf-icon">
<i class="fas fa-question-circle fa-5x"></i>
</div>
<h3><a href="#">คำตอบที่ 1</a>
</h3>
<p>คำตอบ1 คำตอบ1 คำตอบ1</p>
</div>
<div class="sf-mdl-right-full">
<div class="sf-icon">
<i class="fas fa-question-circle fa-5x"></i>
</div>
<h3><a href="#">คำตอบที่ 1</a></h3>
<p>คำตอบ1 คำตอบ1 คำตอบ1</p>
</div>
</div>
</li>
<li id="sf-community" class="col-md-3 col-sm-6 col-xs-12">
<div class="sf-wrap">
<div class="sf-mdl-left">
<div class="sf-icon">
<i class="fas fa-question-circle fa-5x"></i>
</div>
<h3>คำถามที่ 2</h3>
</div>
<div class="sf-mdl-right">
<div class="sf-icon">
<i class="fas fa-question-circle fa-5x"></i>
</div>
<h3>คำถามที่ 2</h3>
</div>
<div class="sf-mdl-left-full">
<div class="sf-icon">
<i class="fas fa-question-circle fa-5x"></i>
</div>
<h3><a href="#">คำตอบที่ 2</a></h3>
<p>คำตอบ2 คำตอบ2 คำตอบ2</p>
</div>
<div class="sf-mdl-right-full">
<div class="sf-icon">
<i class="fas fa-question-circle fa-5x"></i>
</div>
<h3><a href="#">คำตอบที่ 2</a></h3>
<p>คำตอบ2 คำตอบ2 คำตอบ2</p>
</div>
</div>
</li>
<li id="sf-academy" class="col-md-3 col-sm-6 col-xs-12">
<div class="sf-wrap">
<div class="sf-mdl-left">
<div class="sf-icon">
<i class="fas fa-question-circle fa-5x"></i>
</div>
<h3>คำถามที่ 3</h3>
</div>
<div class="sf-mdl-right">
<div class="sf-icon">
<i class="fas fa-question-circle fa-5x"></i>
</div>
<h3>คำถามที่ 3</h3>
</div>
<div class="sf-mdl-left-full">
<div class="sf-icon">
<i class="fas fa-question-circle fa-5x"></i>
</div>
<h3><a href="#">คำตอบที่ 3</a></h3>
<p>คำตอบ3 คำตอบ3 คำตอบ3</p>
</div>
<div class="sf-mdl-right-full">
<div class="sf-icon">
<i class="fas fa-question-circle fa-5x"></i>
</div>
<h3><a href="#">คำตอบที่ 3</a></h3>
<p>คำตอบ3 คำตอบ3 คำตอบ3</p>
</div>
</div>
</li>
<li id="sf-opportunity" class="col-md-3 col-sm-6 col-xs-12">
<div class="sf-wrap">
<div class="sf-mdl-left">
<div class="sf-icon">
<i class="fas fa-question-circle fa-5x"></i>
</div>
<h3>คำถามที่ 4</h3>
</div>
<div class="sf-mdl-right">
<div class="sf-icon">
<i class="fas fa-question-circle fa-5x"></i>
</div>
<h3>คำถามที่ 4</h3>
</div>
<div class="sf-mdl-left-full">
<div class="sf-icon">
<i class="fas fa-question-circle fa-5x"></i>
</div>
<h3><a href="#">คำตอบที่ 4</a></h3>
<p>คำตอบ4 คำตอบ4 คำตอบ4</p>
</div>
<div class="sf-mdl-right-full">
<div class="sf-icon">
<i class="fas fa-question-circle fa-5x"></i>
</div>
<h3><a href="#">คำตอบที่ 4</a></h3>
<p>คำตอบ4 คำตอบ4 คำตอบ4</p>
</div>
</div>
</li>
</ul>
</div>
</section>
<script>
$(function () {
$('#section-feature .sf-wrap')
.hover(function() {
$(this).addClass('hover');
}, function() {
$(this).removeClass('hover');
})
.click(function(event) {
//if (event.target.nodeName != 'A') {
$(this).toggleClass('active');
//}
});
});
</script>
</body>
</html>
Raw
index3.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
<style>
section {
display: flex;
flex-wrap: wrap;
justify-content: center;
}
/* TAKE OBJECT FAR FROM PERSPECTIVE VIEW */
.card {
/* background-color: #0000aa; */
perspective: 1000px;
margin: 1rem;
}
/* SET SAME COLUMN AND ROW FOR BOTH CARD */
.card-container {
display: grid;
grid-template-columns: 1fr;
transition: all 1s ease;
transform-style: preserve-3d;
}
.card-front {
grid-area: 1 / 1;
transform: rotateY(180deg);
}
.card-back {
grid-area: 1 / 1;
}
/* FIX CARD IMAGES WIDTH */
.card-container img {
width: 15rem;
}
.card:hover .card-container {
transform: rotateY(180deg);
}
</style>
</head>
<body>
<section>
<!-- CARD - 1 -->
<div class="card">
<div class="card-container">
<div class="card-front">
<img src="https://drive.google.com/uc?id=12sFnDBkOuiCVd0BniG2JGDFM-A2wq3G5" />
</div>
<div class="card-back">
<img src="https://drive.google.com/uc?id=1moBiXvJ2JNrTaJur3ZPzz3VXgvelyngu" />
</div>
</div>
</div>
<!-- CARD - 2 -->
<div class="card">
<div class="card-container">
<div class="card-front">
<img src="https://drive.google.com/uc?id=1-O1XYtuITEKGvo0asg8u_QVI_tXIXvRh" />
</div>
<div class="card-back">
<img src="https://drive.google.com/uc?id=1kKno_EunMkAZPT_ENuPkrhL949nmlrdt" />
</div>
</div>
</div>
<!-- CARD - 3 -->
<div class="card">
<div class="card-container">
<div class="card-front">
<img src="https://drive.google.com/uc?id=1N8mE-H9nDeD_vWlztbM2VpVflKjmdxfi" />
</div>
<div class="card-back">
<img src="https://drive.google.com/uc?id=1bLS-59kQxWqplHXIxYgz-BNT1Jk5VMge" />
</div>
</div>
</div>
<!-- CARD - 4 -->
<div class="card">
<div class="card-container">
<div class="card-front">
<img src="https://drive.google.com/uc?id=1w20cQfALFasjhtyRq01HLMYjPTqMOMIa" />
</div>
<div class="card-back">
<img src="https://drive.google.com/uc?id=1wu_Hf8JYn6lS0xpOr9u-cSlU9L4-F7CR" />
</div>
</div>
</div>
</section>
</body>
</html>
Raw
style.css
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
background: #222;
font-family: sans-serif;
}
label {
display: block;
position: absolute;
top: 50%;
left: 50%;
width: 280px;
height: 350px;
perspective: 1000px;
transform-style: preserve-3d;
transform: translate(-50%, -50%);
cursor: pointer;
}
.flip-card {
position: relative;
width: 100%;
height: 100%;
transform-style: preserve-3d;
transition: all 0.5s ease-in-out;
z-index: 1;
}
.flip-card .front,
.flip-card .back {
position: absolute;
width: 100%;
height: 100%;
backface-visibility: hidden;
}
.flip-card .back {
transform: rotateY(180deg);
}
label:hover .flip-card {
transform: rotateY(2deg);
box-shadow: 0 20px 20px rgba(50, 60, 60, 0.2);
}
input {
display: none;
}
:checked + .flip-card {
transform: rotateY(180deg);
}
label:hover :checked + .flip-card {
transform: rotateY(175deg);
box-shadow: 0 20px 20px rgba(255, 255, 255, 0.2);
}
.front img {
width: 300px;
height: 388px;
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment