YouTube動画で3Dアニメーションで簡単そうなのあったんで。
見ながら作ってみました。
今回はtransform-style: preserve-3d;
rotateY() translateZ();を使ってる。
実際にコード書いてみました。
ビックリしたのが、HTMLとCSSで表現してます。
完成したのがこちらになります。
これは、ノーマルの数値変更して試した結果です。
実際に書いたコード公開
ノーマル値と変更の値書いてます。
やってみてこんなに簡単に3D表現できるのにビックリ
ここにコードも書いときますのでよかったら参考にして
色々自分でいじってみてください。
HTML
<body>
<div class="cube">
<div class="top"></div><!-- /.top -->
<div>
<span style="--i:0;">kokoko</span>
<span style="--i:1;">222222</span>
<span style="--i:2;">56565656</span>
<span style="--i:3;">5848484848</span>
</div>
</div><!-- /.cube -->
</body>
CSS
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
display: flex;
justify-content: center;
align-items: center;
min-height: 100vh;
background: #050505;
}
.cube {
position: relative;
width: 300px;
height: 300px;
transform-style: preserve-3d;
/* 上にボックス足してる */
transform-style: rotateX(-30deg);
animation: animate 4s linear infinite;
}
@keyframes animate
{
0%
{
transform: rotateX(-30deg) rotateY(0deg);
}
100%
{
transform: rotateX(-30deg) rotateY(360deg);
}
}
.cube div {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
transform-style: preserve-3d;
}
.cube div span {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: linear-gradient(#bf0f0f,#00ec00);
transform: rotateY(calc(90deg * var(--i))) translateZ(180px);
/* 四隅くっつけるのはこれ↓ 初期値 */
/* transform: rotateY(calc(90deg * var(--i))) translateZ(150px); */
/* 300/2=150 */
opacity: 0.5;
}
.top {
position: absolute;
top: 0;
left: 0;
width: 300px;
height: 300px;
background: rgb(152, 236, 27);
transform: rotateX(50deg) translateZ(10px);
/* トップの四角上につけるのこれ↓初期値 */
transform: rotateX(90deg) translateZ(1550px);
}
.top::before {
content: "";
position: absolute;
top: 0;
left: 0;
width: 300px;
height: 300px;
background: #0f0;
transform: translateZ(-380px);
filter: blur(20px);
box-shadow: 0 0 120px rgba(0,255,0,0.2),
0 0 200px rgba(0,255,0,0.4),
0 0 300px rgba(0,255,0,0.6),
0 0 400px rgba(0,255,0,0.8),
0 0 500px rgba(0,255,0,1);
}
transform-style: preserve-3dを使用
CSSで3D表現するには、
今回はtransform-style: preserve-3d;の指定。
background: linear-gradient(#bf0f0f,#00ec00);
transform: rotateY(calc(90deg * var(–i))) translateZ(180px);
で４つの面の指定してる。
後はtopの指定で上部の四角指定
::beforeで下部に光ってる感じの表現をしてます。
これだけのコードで表現できたのでここからいろいろ応用
していきたいところです。
今回参考にしたYouTube動画はこちらになります。
コメント