LoginSignup
1
0

More than 1 year has passed since last update.

CSSだけで立方体を回転させるアニメーション

Last updated at Posted at 2022-07-07

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.

1
0
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
1
0