coder-jason.github.io/flip-card/
i-phone flip
coder-jason.github.io
아이폰 SE2 카드에
마우스를 올리면 저절로 뒤집히면서
가격화면을 나타낸다.
몰랐던 부분 1.
transition: transform 1s ease-in-out;
1초동안 효과가 천천히 시작되어 천천히 끝남.
몰랐던 부분 2.
transform-style : preserve-3d;
3d로 나타내는 건데
아직도 헷갈린다.
참고자료
css-tricks.com/things-watch-working-css-3d/
Things to Watch Out for When Working with CSS 3D | CSS-Tricks
I've always loved 3D geometry. I began playing with CSS 3D transforms as soon as I noticed support in CSS was getting decent. But while it felt natural to
css-tricks.com
developer.mozilla.org/en-US/docs/Web/CSS/transform-style
transform-style
The transform-style CSS property sets whether children of an element are positioned in the 3D space or are flattened in the plane of the element.
developer.mozilla.org
몰랐던 부분3.
포지션 relative, absolute.
이 두개는 만들때마다 등장해서
꼭 알고 넘어가야 할 것 같다.
처음엔 이해하기 어려웠는데
만들다보니 적응해 나가고 있다.
부모요소 relative
자식요소 absoulte
밑에 블로그보면 이해하기 쉽게 설명해 주었다.
[position_2] relative와 absolute의 차이
html로 부모와 자식 관계의 div요소 두개를 만들어보겠습니다 css로 부모요소는 aquamarine색의 백그라운드 컬러를 주었고 자식요소는 skyblue색의 백그라운드 컬러를 주어 구분하였습니다 부모요소��
happy-dust.tistory.com
전체코드
HTML
<!DOCTYPE html>
<html>
<head>
<title>i-phone flip</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<div class="container">
<div class="card-container">
<div class="card">
<figure class="front">
<img src="assets/se-front.png">
<h1>아이폰 SE2</h1>
<p>64GB, 128GB, 256GB</p>
</figure>
<figure class="back">
<h1>PRICE: 550,000원</h1>
<BUTTON>BUY</BUTTON>
</figure>
</div>
</div>
</div>
</body>
</html>CSS
.container
{
width: 100%;
height: 100vh;
display: flex;
justify-content: center;
align-items: center;
}
.card-container
{
width: 200px;
height: 350px;
}
.card-container img
{
width: 100px;
height: 150px;
}
.card
{
width: 100%;
height: 100%;
transition: transform 1s ease-in-out;
transform-style: preserve-3d;
}
.card-container:hover .card
{
transform: rotateY(180deg);
}
.card figure
{
width: 100%;
height: 100%;
position: absolute;
margin: 0;
border-radius: 5px;
display: flex;
justify-content: center;
align-items: center;
flex-direction: column;
text-align: center;
}
.card .front
{
background: black;
color: white;
}
.card .back
{
background: aqua;
color: white;
transform: rotateY(180deg);
}
.back button
{
background: yellow;
border: none;
font-weight: bold;
}'페이지 만들기' 카테고리의 다른 글
| 회원가입 페이지 연습 (0) | 2020.09.01 |
|---|---|
| 비전공자 - 페이지 만들기 (ft 요리 레시피) (0) | 2020.08.30 |
| 비전공자 - 웹페이지 만들기(ft 토트넘 프로필) (0) | 2020.08.29 |
| 비전공자 - 영화페이지 만들기 (ft 영화 Begin Aagin) (0) | 2020.08.28 |
