- Files
- Index
- Style
- Script
- README
- CDN Add
PLEASE WAIT...
<html>
<title>CSS flip</title>
<body>
<div class="container">
<div class="card">
<div class="front"></div>
<div class="back"></div>
</div>
</div>
</body>
</html>.container{
margin-top: 100px;
margin-left: 100px;
position: relative;
width: 250px;
height: 320px;
}
.card{
align-content: center;
position: absolute;
width: 100%;
height: 100%;
transform-style: preserve-3d;
transition: all 0.5s ease;
background-image: url("https://images.theconversation.com/files/122137/original/image-20160511-18171-kulas4.jpg?ixlib=rb-1.1.0&q=45&auto=format&w=1200&h=1200.0&fit=crop");
background-size: cover;
}
.card:hover{
transform: rotateY(180deg);
}
.front{
background-position: center;
position: absolute;
width:100%;
height:100%;
backface-visibility: hidden;
background-image: url("https://images.theconversation.com/files/122137/original/image-20160511-18171-kulas4.jpg?ixlib=rb-1.1.0&q=45&auto=format&w=1200&h=1200.0&fit=crop");
color:darkgray;
}
.back{
position: absolute;
width:100%;
height:100%;
backface-visibility: hidden;
background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAOEAAADhCAMAAAAJbSJIAAAAP1BMVEX/////AAD/5eX/pqb/Cgr/Z2f/sbH/wsL/ExP/JCT/wcH/09P/+Pj/q6v/Hh7/bm7/Kir/cnL/4OD/tbX/ysrLzt6IAAABF0lEQVR4nO3Pxw3CAADAQHrvsP+s/AnPSJGjuwnsxQIAAAAYxWp/2v86nS9TZ43oejsMLO+rqbNGtF7+sZ3V4cZhncM+h30O+xz2Oexz2Oewz2Gfwz6HfQ77HPY57HPY57DPYZ/DPod9Dvsc9jnsc9jnsM9hn8M+h30O+xz2Oexz2Oewz2Gfwz6HfQ77HPY57HPY57DPYZ/DPod9Dvsc9jnsc9jnsM9hn8M+h30O+xz2Oexz2Oewz2Gfwz6HfQ77HPY57HPY57DPYZ/DPod9Dvsc9jnsc9jnsM9hn8M+h30O+xz2Oexz2Oewz2Gfwz6HfQ77HPY57HPY57Bv/WdwXofXx3Hg9pzT4eu9G/pcps4CAAAAAICaLzBMGexr3IhSAAAAAElFTkSuQmCC") ;
background-size: cover;
color:darkgray;
transform: rotate(180deg);
}/* ESLint rules https://eslint.org/docs/2.0.0/rules/ */
/* eslint no-undef: "off" */