どうも7noteです。立方体の作り方
サイコロを作ったり、写真をはめ込んだ立方体を作ったりすることができます。
作ったことがなかったので、作り方を調べたので記録代わりに投稿。
使い方をマスターすればいろいろなものが作れそう。
①線のみVer.
![01.png](https://qiita-user-contents.imgix.net/https%3A%2F%2Fqiita-image-store.s3.ap-northeast-1.amazonaws.com%2F0%2F661092%2F8b33ab17-8494-638d-fdcc-4a6a233d6223.png?ixlib=rb-4.0.0&auto=format&gif-q=60&q=75&s=28633845f7b2e0f01039c5274f7b7fc6)
index.html
<div class="box">
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
</div>
style.css
.box {
display:block;
position:relative;
margin:30px auto 0;
width:100px;
height:100px;
transform-style:preserve-3d;
transform:rotateX(-25deg) rotateY(-45deg); /* ここで四角の角度を調整できる */
}
.box .item {
position:absolute;
left:0;
right:0;
box-sizing:border-box;
border:1px solid #333;
width:100%;
height:100%;
}
/* 上 */
.box .item:nth-child(1) {
transform:translate3d(0, -50px, 0) rotateX(-90deg);
}
/* 左 */
.box .item:nth-child(2) {
transform:translate3d(0, 0, 50px);
}
/* 右 */
.box .item:nth-child(3) {
transform:translate3d(50px, 0, 0) rotateY(90deg);
}
②色付きVer.
![02.png](https://qiita-user-contents.imgix.net/https%3A%2F%2Fqiita-image-store.s3.ap-northeast-1.amazonaws.com%2F0%2F661092%2F02770d24-946e-ed5d-df3d-c86f360ab3f6.png?ixlib=rb-4.0.0&auto=format&gif-q=60&q=75&s=8315a3c691dba0fd6f5e19c65a8feb35)
style.css
/* ①に↓を追記 */
.box {
background: #ccc;
}
※各面で違う色や背景画像を指定することも可。
その場合は各nth-child()
の指定があるところにbackgroundを指定
。
③文字入りVer.
![03.png](https://qiita-user-contents.imgix.net/https%3A%2F%2Fqiita-image-store.s3.ap-northeast-1.amazonaws.com%2F0%2F661092%2F81b4f341-8728-974e-bad5-c32fa3a0440b.png?ixlib=rb-4.0.0&auto=format&gif-q=60&q=75&s=6abad5b0a136e79026526b6f560eacdd)
index.html
<div class="box">
<div class="item">1</div>
<div class="item">2</div>
<div class="item">3</div>
</div>
style.css
/* ①に↓を追記 */
.box {
display:flex;
flex-direction:row;
align-items:center;
justify-content:center;
}
④サイコロVer.
![04.png](https://qiita-user-contents.imgix.net/https%3A%2F%2Fqiita-image-store.s3.ap-northeast-1.amazonaws.com%2F0%2F661092%2Ffc0f229b-01e7-56e6-a146-325a08317cb4.png?ixlib=rb-4.0.0&auto=format&gif-q=60&q=75&s=0b775227d3805d3f3b93584b4e1cff3e)
style.css
/* 画像を用意して①に↓を追記 */
/* 上 */
.box .item:nth-child(1) {
background: url(sai1.png) no-repeat center center / 100% 100%;
}
/* 左 */
.box .item:nth-child(2) {
background: url(sai2.png) no-repeat center center / 100% 100%;
}
/* 右 */
.box .item:nth-child(3) {
background: url(sai3.png) no-repeat center center / 100% 100%;
}
※画像は一番下にあります。
⑤サイコロ アニメーションVer.
![05.gif](https://qiita-user-contents.imgix.net/https%3A%2F%2Fqiita-image-store.s3.ap-northeast-1.amazonaws.com%2F0%2F661092%2Fd7cdcf4f-9929-2280-1bee-7811b3a5e67a.gif?ixlib=rb-4.0.0&auto=format&gif-q=60&q=75&s=6c5e1658546314a90a21928d851e5548)
index.html
<div class="dice">
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
</div>
style.css
.dice {
display:block;
position:relative;
margin:30px auto 0;
width:100px;
height:100px;
transform-style:preserve-3d;
transform:rotateX(360deg) rotateY(360deg) rotateZ(720deg);
animation:rotate-animation 2s linear infinite;
}
.dice .item {
position:absolute;
left:0;
right:0;
border: 1px solid #333;
box-sizing:border-box;
width:100%;
height:100%;
}
/* 1 */
.dice .item:nth-child(1) {
transform:translate3d(0, -50px, 0) rotateX(-90deg);
background: url(sai1.png) no-repeat center center / 100% 100%;
}
/* 2 */
.dice .item:nth-child(2) {
transform:translate3d(0, 0, 50px);
background: url(sai2.png) no-repeat center center / 100% 100%;
}
/* 3 */
.dice .item:nth-child(3) {
transform:translate3d(50px, 0, 0) rotateY(90deg);
background: url(sai3.png) no-repeat center center / 100% 100%;
}
/* 4 */
.dice .item:nth-child(4) {
transform:translate3d(-50px, 0, 0) rotateY(-90deg);
background: url(sai4.png) no-repeat center center / 100% 100%;
}
/* 5 */
.dice .item:nth-child(5) {
transform:translate3d(0, 0, -50px) rotateY(180deg);
background: url(sai5.png) no-repeat center center / 100% 100%;
}
/* 6 */
.dice .item:nth-child(6) {
transform:translate3d(0, 50px, 0) rotateX(-90deg);
background: url(sai6.png) no-repeat center center / 100% 100%;
}
@keyframes rotate-animation {
from {
transform:rotate3d(0);
}
to {
transform:rotate3d(1, 1, 1, -360deg);
}
}
感想
.2sくらいで超高速でアニメーションさせたら、桃鉄のサイコロ振る時みたいにできるよ。
![omake.gif](https://qiita-user-contents.imgix.net/https%3A%2F%2Fqiita-image-store.s3.ap-northeast-1.amazonaws.com%2F0%2F661092%2F92d439cd-0c06-29e2-bff3-40ac6eb33d14.gif?ixlib=rb-4.0.0&auto=format&gif-q=60&q=75&s=908de0c2fbee985d8a159fdd57ab94fb)
あ〜〜桃鉄やりたい。
参考・素材
https://shanabrian.com/web/css3/transform-cube-dice.php
https://chicodeza.com/freeitems/saikoro-illust.html
![](https://qiita-user-contents.imgix.net/https%3A%2F%2Fqiita-image-store.s3.ap-northeast-1.amazonaws.com%2F0%2F661092%2F239ace7b-c555-caee-2caa-4088f4ed1224.png?ixlib=rb-4.0.0&auto=format&gif-q=60&q=75&s=4cee170f323b035a91aec58095b81a65)
![](https://qiita-user-contents.imgix.net/https%3A%2F%2Fqiita-image-store.s3.ap-northeast-1.amazonaws.com%2F0%2F661092%2F2c503871-f378-40a9-fe8b-bdec64f4777f.png?ixlib=rb-4.0.0&auto=format&gif-q=60&q=75&s=c92c0b6ca6bc81bc31e8d6e257b73f1a)
![](https://qiita-user-contents.imgix.net/https%3A%2F%2Fqiita-image-store.s3.ap-northeast-1.amazonaws.com%2F0%2F661092%2F6dd69430-7d89-0d58-dd68-538495b089b5.png?ixlib=rb-4.0.0&auto=format&gif-q=60&q=75&s=fe11de5b0899a364f298b0cd27431974)
![](https://qiita-user-contents.imgix.net/https%3A%2F%2Fqiita-image-store.s3.ap-northeast-1.amazonaws.com%2F0%2F661092%2F7aac609f-dca9-fd49-f45c-0858e4a63fed.png?ixlib=rb-4.0.0&auto=format&gif-q=60&q=75&s=aa6c8af900ab52313ff9c9f0793df00a)
![](https://qiita-user-contents.imgix.net/https%3A%2F%2Fqiita-image-store.s3.ap-northeast-1.amazonaws.com%2F0%2F661092%2Fd00093a4-5896-86d6-c6a2-e1ce59d47a82.png?ixlib=rb-4.0.0&auto=format&gif-q=60&q=75&s=c3cde28c382d9c4918c2396fd787b869)
![](https://qiita-user-contents.imgix.net/https%3A%2F%2Fqiita-image-store.s3.ap-northeast-1.amazonaws.com%2F0%2F661092%2Fa41cb852-68cb-2e6c-8f44-91a3a3e7f9bd.png?ixlib=rb-4.0.0&auto=format&gif-q=60&q=75&s=0755e113921fbb629b407068c514f601)