YouTube動画で3Dアニメーションで簡単そうなのあったんで。
見ながら作ってみました。
今回はtransform-style: preserve-3d;
rotateY() translateZ();を使ってる。
実際にコード書いてみました。
ビックリしたのが、HTMLとCSSで表現してます。
完成したのがこちらになります。
これは、ノーマルの数値変更して試した結果です。
実際に書いたコード公開
ノーマル値と変更の値書いてます。
やってみてこんなに簡単に3D表現できるのにビックリ
ここにコードも書いときますのでよかったら参考にして
色々自分でいじってみてください。
HTML
|
1 2 3 4 5 6 7 8 9 10 11 12 |
<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
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 |
* { 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動画はこちらになります。
最近思うのですが、独学もいいのですがわからない所や、
コーディング時のルールなど教えてもらえる環境も必要かなと
感じています。
そこでプログラミングスクールの記事も書いてみました。
高単価案件が最短二日で決まる！フリーランスエンジニア案件情報サイト【ポテパンフリーランス】
 |
1冊ですべて身につくHTML ＆ CSSとWebデザイン入門講座 新品価格 |
コメント