CSS transform 예제 - CUBE
실행결과
cube.html
<!DOCTYPE html>
<html>
<head>
<title>CSS3 Transform Basic</title>
<link rel="stylesheet" href="cube.css" />
</head>
<body>
<section>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
</section>
</body>
</html>
cube.css
body {
width: 200px;
margin: 200px auto;
-webkit-perspective: 400;
}
section {
width: 200px; height: 200px;
position: relative;
animation: rint 3s linear 0s infinite;
transform-style: preserve-3d;
}
@keyframes rint {
from {
transform: rotateX(0deg) rotateY(0deg) rotateZ(0deg);
}
to {
transform: rotateX(360deg) rotateY(360deg) rotateZ(360deg);
}
}
div {
width: 200px; height: 200px;
position: absolute; left: 0; top: 0;
opacity: 0.3;
}
div:nth-child(1) {
transform: rotateY( 0deg) translate3d(0px, 0px, 100px);
background: red;
}
div:nth-child(2) {
transform: rotateY( 90deg) translate3d(0px, 0px, 100px);
background: green;
}
div:nth-child(3) {
transform: rotateY(180deg) translate3d(0px, 0px, 100px);
background: blue;
}
div:nth-child(4) {
transform: rotateY(270deg) translate3d(0px, 0px, 100px);
background: yellow;
}
div:nth-child(5) {
transform: rotateX( 90deg) translate3d(0px, 0px, 100px);
background: brown;
}
div:nth-child(6) {
transform: rotateX(270deg) translate3d(0px, 0px, 100px);
background: pink;
}
|