<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<style>
*{
box-sizing:border-box;
}
div.cardContainer{
height:200px;
width:200px;
display:inline-block;
}
div.cardContainer div{
height:inherit;
width:inherit;
color:#FFF;
font-size:24px;
backface-visibility:hidden;
-webkit-backface-visibility:hidden;
transition:all 1.5s;
-webkit-transition:all 1.5s;
-moz-transition:all 1.5s;
-o-transition:all 1.5s;
padding-top:80px;
text-align:center;
}
.red{
background-color:Red;
}
.pink{
background-color:pink;
}
.yellow{
background-color:yellow;
}
.green{
background-color:Green;
}
.skyblue{
background-color:skyblue;
}
.darkblue{
background-color:darkblue;
}
div.cardContainer div:last-child{
position:relative;
top:-200px;
transform:rotateY(180deg);
-webkit-transform:rotateY(180deg);
-ms-transform:rotateY(180deg);
-moz-transform:rotateY(180deg);
-o-transform:rotateY(180deg);
}
div.cardContainer:hover div:first-child{
transform:rotateY(-180deg);
-webkit-transform:rotateY(-180deg);
-ms-transform:rotateY(-180deg);
-moz-transform:rotateY(-180deg);
-o-transform:rotateY(-180deg);
}
div.cardContainer:hover div:last-child{
transform:rotateY(0deg);
-webkit-transform:rotateY(0deg);
-ms-transform:rotateY(0deg);
-moz-transform:rotateY(0deg);
-o-transform:rotateY(0deg);
}
</style>
<body>
<div class="cardContainer">
<div class="red">RED</div>
<div class="pink">PINK</div>
</div>
<div class="cardContainer">
<div class="yellow">YELLOW</div>
<div class="green">GREEN</div>
</div>
<div class="cardContainer">
<div class="skyblue">SKYBLUE</div>
<div class="darkblue">DARKBLUE</div>
</div>
</body>
</html>
'웹접근성과 웹표준' 카테고리의 다른 글
| CSS로 그라디언트 백그라운드 색변화 (J쿼리 없이 그라데이션 색변경) (1) | 2021.07.01 |
|---|---|
| J쿼리 없이 transform css로 움직이는 아이콘 만들기 (0) | 2021.06.22 |
| 아이폰 iOS/사파리에서 input 체크박스/라디오버튼 화면 문제 (0) | 2020.12.24 |
| iOS 키보드 덮침 현상 웹앱 수정 css (0) | 2020.12.08 |
| css에서 폰트 이상없이 불러오는데 텍스트 깨져보일 경우 (0) | 2019.12.18 |
