스프라이트 이미지로 움짤효과 나타내기
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>animation example with stardew velly</title>
</head>
<style>
@keyframes harvey-ani {
100% {
background-position: -600px 0;
}
}
.spaceship {
width: 150px;
height: 300px;
background: url("img/harvey.png") no-repeat 0 0 / auto 300px;
animation: harvey-ani 1s infinite steps(4);
}
</style>
<body>
<div class="spaceship"></div>
</body>
</html>카드 뒤집는 효과 나타내기
perspective
- perspective: 500px - 무대에 3d라고 선언
- transform: perspective(300px) rotateY(45deg) - 아이템 자체에 3d 효과를 줄 수 있다.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>animation example with stardew velly</title>
</head>
<style>
@keyframes harvey-ani {
100% {
background-position: -600px 0;
}
}
.spaceship {
width: 150px;
height: 300px;
background: url("img/harvey.png") no-repeat 0 0 / auto 300px;
animation: harvey-ani 1s infinite steps(4);
}
.world {
display: flex;
align-items: center;
justify-content: center;
width: 80vw;
height: 60vh;
background-color: yellowgreen;
perspective: 500px; /* 3d 효과. */
}
.card {
position: relative;
width: 100px;
height: 150px;
margin: 1em;
transition: 1s;
transform: rotateY(0deg);
/* transform: perspective(300px) rotateY(45deg); element 자체에 3D 시점 */
transform-style: preserve-3d;
/* 3d효과를 전달 */
}
.card-side {
display: flex;
align-items: center;
justify-content: center;
position: absolute;
font-size: 1.5rem;
/* font size에 따라서 border radius 값이 절반으로 줄어들게 됨. 상대적인 비율을 갖게 된다. */
border-radius: 0.5em;
/* 의도: 폰트사이즈에 비례하게 변화를 주고 싶음 */
width: 100%;
height: 100%;
left: 0;
top: 0;
backface-visibility: hidden;
/* 카드의 뒷면을 보이지 않도록 함 */
}
.card-side-front {
background-color: white;
z-index: 1;
}
.card-side-back {
background-color: yellow;
transform: rotateY(180deg);
}
.world:hover .card {
transform: rotateY(180deg);
}
</style>
<body>
<!-- <div class="spaceship"></div> -->
<div class="world">
<div class="card">
<div class="card-side card-side-front">CARD</div>
<div class="card-side card-side-back">BACK</div>
</div>
</div>
</body>
</html>3D 문 열리는 효과 나타내기
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>3d animation example</title>
</head>
<style>
.world {
display: flex;
align-items: center;
justify-content: center;
width: 80vw;
height: 60vh;
background-color: yellowgreen;
perspective: 500px; /* 3d 효과. perspective: 거리 */
}
.door {
position: relative;
width: 100px;
height: 150px;
margin: 1em;
transition: 1s;
transform: rotateY(0deg);
transform-style: preserve-3d; /* 3d효과를 전달 */
transform-origin: left;
}
.door-side {
display: flex;
align-items: center;
justify-content: center;
position: absolute;
font-size: 1.5rem;
border-radius: 0.5em;
width: 100%;
height: 100%;
left: 0;
top: 0;
backface-visibility: hidden; /* 뒷면을 보이지 않도록 함 */
}
.door-side-front {
background-color: white;
z-index: 1;
}
.door-side-back {
background-color: yellow;
transform: rotateY(180deg);
}
.world:hover .door {
transform: rotateY(-180deg);
}
</style>
<body>
<div class="world">
<div class="door">
<div class="door-side door-side-front">CARD</div>
<div class="door-side door-side-back">BACK</div>
</div>
</div>
</body>
</html>웹표준
prefix(접두어)가 필요한 브라우저가 있다.
webkit, o, moz 등..
이때 접두어가 없는 기본 속성을 가장 아래에 둔다.(덮어쓰기 방지)
-webkit-backface-visibility: hidden;
backface-visibility: hidden;
주니어 플러터 개발자의 고군분투기