반응형
1. HTML Code
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>회전하는 주사위</title>
<link href="css/ex02.css" rel="stylesheet">
</head>
<body>
<h1>회전하는 주사위</h1>
<header>
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
<div>5</div>
<div>6</div>
</header>
</body>
</html>
2. CSS Code
@charset "utf-8";
/* CSS Document */
* {
margin: 0;
padding: 0;
}
header {
width: 200px;
height: 200px;
position: relative;
}
header div {
width: 200px;
height: 200px;
position: absolute;
left: 0;
top: 0;
}
header div:nth-child(1) {
background: red;
}
header div:nth-child(2) {
background: blue;
}
header div:nth-child(3) {
background: green;
}
header div:nth-child(4) {
background: pink;
}
header div:nth-child(5) {
background: gold;
}
header div:nth-child(6) {
background: purple;
}
header div:nth-child(1) {
transform: rotateY(0deg) translate3d(0, 0, 100px);
}
header div:nth-child(2) {
transform: rotateY(90deg) translate3d(0, 0, 100px);
}
header div:nth-child(3) {
transform: rotateY(180deg) translate3d(0, 0, 100px);
}
header div:nth-child(4) {
transform: rotateY(270deg) translate3d(0, 0, 100px);
}
header div:nth-child(5) {
transform: rotateX(90deg) translate3d(0, 0, 100px);
}
header div:nth-child(6) {
transform: rotateX(270deg) translate3d(0, 0, 100px);
}
header {
/* 3차원으로 보기 */
transform-style: preserve-3d;
}
body {
/* 3차원으로 보기 */
transform-style: preserve-3d;
/* 원근감 주기 400 ~ 2000 */
perspective: 2000px;
margin: 200px;
transform: rotateX(-20deg);
}
@keyframes Rot {
from {
transform:rotateX(0) rotateY(0) rotateZ(0);
}
to {
transform: rotateX(360deg) rotateY(360deg) rotateZ(360deg);
}
}
header{
animation-name:Rot;
/* 왓다갓다 */
animation-direction:alternate;
/* 시간 */
animation-duration:5s;
/* 무한 반복 */
animation-iteration-count:infinite;
/* 한줄로 */
animation:Rot 10s ease 0.5s infinite;
top:100px;
font-size:150px;
text-align:center;
line-height:200px;
}
header div{
opacity:0.5;
backface-visibility:hidden;
}
header:hover div{
backface-visibility:visible;
}
body{
/* 화면확대 */
/* zoom:2; */
}
3. HTML / CSS 파일
반응형
'Python_WEB > HTML' 카테고리의 다른 글
| HTML5 - 190623 Basic Study 58(박스 그림자 / 테두리 동적효과) (0) | 2019.06.23 |
|---|---|
| HTML5 - 190623 Basic Study 57(Rotation Circle) (0) | 2019.06.23 |
| HTML5 - 190623 Basic Study 55(Transform 3차원) (0) | 2019.06.23 |
| HTML5 - 190623 Basic Study 54(Transform 2차원) (0) | 2019.06.23 |
| HTML5 - 190622 Basic Study 53(고정형 네비게이션 바) (0) | 2019.06.22 |
