Make writing a habit together! This is my seventh day of digging Gold Day New Plan April Text Challenge,Click here for more details

preface

Today we will use HTML and CSS to create a 3D dice effect.

The implementation principle is as follows:

  • usingflexThe layout sets six points at 🎲.
  • And then usingtransformSet the six points in different positions to form a cube.

implementation

The HTML code is as follows:

<div class="contanter">
    <div class="dice">
        <div class="dice-font">
            <li></li>
        </div>
        <div class="dice-top">
            <li></li>
            <li></li>
        </div>
        <div class="dice-left">
            <li></li>
            <li></li>
            <li></li>
        </div>
        <div class="dice-right">
            <li></li>
            <li></li>
            <li></li>
            <li></li>
        </div>
        <div class="dice-end">
            <li></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
        </div>
        <div class="dice-bottom">
            <li></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
        </div>
    </div>
</div>
Copy the code

The CSS code is as follows:

ol.ul ,li{list-style: none; }html.body{
    margin: 0;
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100vh;
}
:root{
    --boxWidth: 200px;
    --width: 25%;
}
.contanter{
    perspective: 800px;
}
.dice{
    transform-style: preserve-3d;
    position: relative;
    /*width: var(--boxWidth); height: var(--boxWidth); * /
}
.dice>div{
    box-sizing: border-box;
    width: var(--boxWidth);
    height: var(--boxWidth);
    background-color: #eee;
    position: absolute;
}
.dice li{
    width: var(--width);
    height: var(--width);
    background-color: # 000;
    border-radius: 50%;
}
Copy the code

Page initialization looks like this:

Points to a

.dice-font{
display: flex;
justify-content: center;
align-items: center;
}
.dice-font>li{
width: 40%;
height: 40%;
background-color: red;
}
Copy the code

Points to the second

.dice-top{
  display: flex;
  justify-content: space-around;
  align-items: center;
  flex-direction: column;
}
Copy the code

Three points

.dice-left{
  padding: 4px;
  display: flex;
  justify-content: space-around;
}
.dice-left>li:first-of-type{
  align-self: flex-end;
}
.dice-left>li:nth-of-type(2) {align-self: center;
}
Copy the code

Four points

.dice-right{
  display: flex;
  align-items: center;
  flex-wrap: wrap;
}
.dice-right>li{
  margin: 25px;
  background-color: red;
}
Copy the code

Five points

.dice-end{
  display: flex;
  flex-wrap: wrap;
  align-items: center;
}
.dice-end>li{
  margin: 0 25px;
}
.dice-end>li:nth-of-type(3) {margin: 0 75px;
}
Copy the code

Six points

.dice-bottom{
  display: flex;
  flex-wrap: wrap;
  justify-content: space-around;
  align-items: center;
}
.dice-bottom>li{
  margin: 0 18px;
}
Copy the code

3D effect realization

Set each point to a fixed position using transform.

Add the following code:

.dice-top{
    / *... Omit the code */
    transform: translateZ(-100px) translateY(-100px) rotateX(90deg);
}
.dice-left{
    / *... Omit the code */
    transform: translateZ(-100px) translateX(-100px) rotateY(90deg);
}
.dice-right{
    / *... Omit the code */
    transform: translateZ(-100px) translateX(100px) rotateY(-90deg);
}
.dice-end{
    / *... Omit the code */
    transform: translateZ(-200px);
}
.dice-bottom{
    / *... Omit the code */
    transform: translateZ(-100px) translateY(100px) rotateX(-90deg);
}
Copy the code

I can’t see the effect yet, so keep going

.dice{
    / *... Omit the code */
    animation: run 5s linear infinite;
    width: var(--boxWidth);
    height: var(--boxWidth);
}
​
/* Add animation */
@keyframes run {
  30%{
    transform: rotateX(360deg);
  }
  60%{
    transform: rotateX(360deg) rotateY(360deg);
  }
  100%{
    transform: rotateX(360deg) rotateY(360deg) rotateZ(360deg); }}Copy the code

Now you can see the effect of rotation

Finally add some guess points effect to help fun ~~

Modify the HTML code as follows:

Add a checkbox element with a label to control the playback and pause of the animation.

    <input type="checkbox" id="dices">
​
    <label for="dices">
        <div class="contanter">
        <! -- omit code -->
        </div>
    </label>
Copy the code

Modify the CSS code as follows:

.dice{
    / *... Omit the code */
    animation: run 0.1 s linear infinite;
    
}
​
#dices{
    display: none;
}
​
#dices:checked + label .contanter .dice{
    animation-play-state: paused;
}
Copy the code

The final effect is as follows:

The source code for the 👉 demo is linked here at CodePen.

conclusion

And that’s all for this share

If you think the article is well written and inspiring, please do not hesitate to like and follow it and leave your valuable opinion in the comments section ~~😃