i have actually been just recently making my very own web site as well as i made a decision that i intend to have a 3d dice result that would certainly rotate around clockwise. i composed several of the fundamental codes down however when i am reaching the CSS component the entire building makes a decision to quit on me as well as do things i did not suggest for it to do … i am relatively brand-new to HTML as well as CSS, so i do not recognize every little thing concerning this. this is the code i have actually composed thus far, a little bit of an alerting to this is i do not recognize just how to code in javascript
<< div course=" dice">
<> < div course=" face front">> 1<.
<< div course=" face back">> 2<.
<< div course=" face top">> 3<.
<< div course=" face base">> 4<.
<< div course=" face left">> 5<.
<< div course=" encounter best">> 6<.
<.
body {
background-color: black;
shade: lime;
font-family: "Messenger New";
}
. dice {
viewpoint: 800px;
transform-style: preserve-3d;
text-align: facility;
}
. face {
setting: outright;
size: 200px;
elevation: 200px;
boundary: 2px strong lime;.
box-sizing: border-box;.
font-size: 32px;.
font-weight: vibrant;.
text-align: facility;.
line-height: 200px;.
}
. front {
change: rotateY( 0deg) translateZ( 100px);.
}
. back {
change: rotateY( 180deg) translateZ( 100px);.
}
. leading {
change: rotateX( 90deg) translateZ( 100px);.
}
. lower {
change: rotateX( -90 deg) translateZ( 100px);.
}
. left {
change: rotateY( -90 deg) translateZ( 100px);.
}
. right {
change: rotateY( 90deg) translateZ( 100px);.
}
the most significant trouble for me was really focusing the dice, i attempted margins as well as flexbox however i truly am uncertain what i'm doing incorrect. if anybody would certainly be fine with assisting me it would certainly be my satisfaction. thanks as well as have a fine day ...
