CSSだけで立方体を作ってそれを回転させるアニメーションを作る
以下コード
index.html
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>CSS-Dice</title>
<link rel="stylesheet" href="css/style.css">
</head>
<body>
<div class="main-contaner">
<div class ='stage-cube-cont'>
<div class ='cubespinner'>
<div class ='face1'>
<p>一</p>
</div>
<div class ='face2'>
<p>二</p>
</div>
<div class ='face3'>
<p>三</p>
</div>
<div class ='face4'>
<p>四</p>
</div>
<div class ='face5'>
<p>五</p>
</div>
<div class ='face6'>
<p>六</p>
</div>
</div>
</div>
</div>
</body>
</html>
style.css
@charset "utf-8";
body {
margin: 0;
padding: 0;
user-select: none;
-webkit-user-select: none;
}
.main-contaner {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
-webkit-transform: translate(-50%, -50%);
width: 100%;
height: 100%;
background: #000 ;
}
.stage-cube-cont {
position: absolute;
top: 45%;
left: 50%;
transform: translate(-45%, -50%);
-webkit-transform: translate(-45%, -50%);
}
.cubespinner {
animation-name: spincube;
animation-timing-function: ease-in-out;
animation-iteration-count: infinite;
animation-duration: 12s;
transform-style: preserve-3d;
transform-origin: 100px 100px 0;
margin-left: calc(50% - 100px);
}
.cubespinner div {
position: absolute;
width: 200px;
height: 200px;
border: 1px solid #ccc;
background: rgba(255, 255, 255, 1);
font-size: 100px;
display: flex;
justify-content: center;
align-items: center;
box-shadow: 0 0 20px 0px lightyellow;
}
.cubespinner div p {
/* フォント適用 */
}
/* 各面の傾き */
.face1 {
transform: translateZ(100px);
}
.face1 p {
color: #f00;
}
.face2 {
transform: rotateY(90deg) translateZ(100px);
}
.face3 {
transform: rotateY(90deg) rotateX(90deg) translateZ(100px);
}
.face4 {
transform: rotateY(180deg) rotateZ(90deg) translateZ(100px);
}
.face5 {
transform: rotateY(-90deg) rotateZ(90deg) translateZ(100px);
}
.face6 {
transform: rotateX(-90deg) translateZ(100px);
}
/* アニメーション */
@keyframes spincube {
from,
to {
transform: rotateX(0deg) rotateY(0deg) rotateZ(0deg);
}
16% {
transform: rotateY(-90deg);
}
33% {
transform: rotateY(-90deg) rotateZ(90deg);
}
50% {
transform: rotateY(-180deg) rotateZ(90deg);
}
66% {
transform: rotateY(-270deg) rotateX(90deg);
}
83% {
transform: rotateX(90deg);
}
}
プレビュー
See the Pen Untitled by illionillion (@illionillion) on CodePen.