CSS3 Flex layout combined with transform to generate a 3D dice

1 Flex Layouts

First talk about flex layout, Flex layout, also known as "Flex Layout", any container can be designated as Flex layout, setting Flex layout will invalidate the float, clear, vertical-align of child elements

1.1 Flex Properties

• 1.1.1 Flex-direction: Determines the alignment of items, which are arranged horizontally from left to right by default

  .box {  flex-direction: row | row-reverse | column | column-reverse;}

  Row (default): The spindle is horizontal, from left to right
  Row-reverse: Spindle is horizontal, from right to left
  Column: Spindle in vertical direction, from top to bottom
  Column-reverse: The spindle is vertically oriented, from bottom up

• 1.1.2 Flex-wrap: Determines the line wrapping of items that exceed the axes, default does not wrap

  .box{  flex-wrap: nowrap | wrap | wrap-reverse;}

  NoWrap (default): No Line break
  Wrap: Line wrap, first row above
  Wrap-reverse: Line break, the first line is below

• 1.1.3 Flex-flow:flex-direction and Flex-wrap in shorthand form, default row nowrap

• 1.1.4 justify-content: Determines the alignment of the item in the spindle, horizontally aligned in the Flex-direction default row case

  .box {  justify-content: flex-start | flex-end | center | space-between | space-around;}

  Flex-start (default): Left Justified
  Flex-end: Right-justified
  Center: Center
  Space-between: Justify, Project interval is the same
  Space-around: The interval between each item is equal, and the middle item is one more than the project interval on both sides.

• 1.1.5 Align-items: Determines how the item is aligned on the cross axis, aligned vertically in the Flex-direction default row case

  .box {  align-items: flex-start | flex-end | center | baseline | stretch;}

  Flex-start: Intersection axis start alignment
  Flex-end: Cross-axis end-of-line alignment
  Center: Center
  Baseline: Baseline alignment of the first line of text in a project
  Stretch (default): Stretches the height of the entire container if the item is not set to height or set to auto

• 1.1.6 align-content: Defines the alignment of multiple axes. If the project has only one axis, this property has no effect, that is, if the item has multiple rows or multiple columns.

  .box {  align-content: flex-start | flex-end | center | space-between | space-around | stretch;}

  Flex-start (default): cross-axis start alignment
  Flex-end: Cross-axis end-of-line alignment
  Center: Center
  Space-between: aligned with the intersection axis, evenly spaced between axes
  Space-around: The intervals between each axis are equal

1.2 Example of flex layout-six faces of a dice

A general understanding of the properties of the flex layout enables the layout of the six faces of the dice with the Flex layout (refer to Nanyi's tutorial http://www.ruanyifeng.com/blog/2015/07/flex-examples.html)

• 1.2.1 HTML Layout

  <div class= "Mf-box" > <div class= "box box1" > <span class= "Item" ></span>                </div> <div class= "box Box2" > <span class= "Item" ></span>                <span class= "Item" ></span> </div> <div class= "box Box3" >  <span class= "Item" ></span> <span class= "item" ></span> <span Class= "Item" ></span> </div> <div class= "box box4" > <div clas s= "column" > <span class= "item" ></span> <span class= "Item" ></ span> </div> <div class= "column" > <span class= "Item" ;</span> <span class= "item" ></span> </div> &LT;/DIV&G            T &LT;DIV CLass= "box box5" > <div class= "column" > <span class= "Item" ></span> <span class= "Item" ></span> </div> <div class= "column" &G                    T                    <span class= "Item" ></span> </div> <div class= "column" > <span class= "Item" ></span> <span class= "Item" ></span> <                    /div> </div> <div class= "box box6" > <div class= "column" >                <span class= "Item" ></span> <span class= "Item" ></span>                    </div> <div class= "column" > <span class= "Item" ></span>    <span class= "Item" ></span> </div> <div class= "column" >                <span class= "Item" ></span> <span class= "Item" ></span> </div> </div> </div>

• 1.2.2 CSS Styles

  /*骰子点数布局*/.box{box-sizing: border-box;padding: 10px;width: 100px;height: 100px;border-radius: 10px;background: #fff;display: flex;  box-shadow: 0 0 10px #000 inset;}.box1{justify-content: center;align-items: center;}.box2{flex-direction: column;justify-content: space-between;align-items: center;}.box3{flex-direction: row;justify-content: space-between;align-items: flex-start;}.item{display: inline-block;width: 15px;height: 15px;border-radius: 15px;background: #000;order: auto;}.box3 .item:nth-child(2){align-self: center;}.box3 .item:nth-child(3){align-self: flex-end;}.box4,.box5,.box6{flex-wrap: wrap;justify-content: space-between;align-content:space-between ;}.column{display: flex;flex-basis: 100%;justify-content: space-between;}.box5 .column:nth-child(2){justify-content: center;}.box6 .column{justify-content: space-around;}

  The implementation effect is as follows
  

2 Transform 3D

In order to achieve the effect of three-dimensional dice, you need to use the Transform 3D property, 3D space coordinate system as follows

2.1 Transform 3D Properties

• 2.1.1 3D Displacement--translatez () and Translate3d (), Translate3d (x, y, z) move an element along a three-dimensional axis in three-dimensional space

• 2.1.2 3D Rotation--rotatex (), Rotatey () and Rotatez ()

x: Rotate from the bottom to the x-axis of the box
Y: Rotate from left to right in the y-axis of the box
Z: The center of the box is the origin and rotates clockwise.

• 2.1.3 3D Perspective--transform-style and perspective

TRANSFORM-STYLE:PRESERVE-3D specifies how nested elements are displayed in 3D space without the 3D effect if the property is not set. needs to be set in the parent element, and above any nested deform elements.
Perspective, which specifies the perspective effect of the 3D element. Simply put, perspective sets the distance between the user and the element 3D space Z-plane, the smaller the value, the closer the user is to the 3D space Z-Plane, the more visible the visual effect is, and the greater the value, the farther the user is from the 3D space Z-plane, the less visible the visual effect.

2.2 Transform 3D example--cubic effect of dice

• 2.2.1 Parent element, child element positioning

The parent element has the Transform-style attribute, position is set to relative, and the child element's position is set to absolute

.mf-box{    box-sizing: border-box;    width: 100px;    height: 100px;    margin: 0 auto;         perspective: 400px;    transform-style: preserve-3d;    position: relative;    transform: rotateX(30deg)rotateY(30deg);/*旋转一定角度方便观察*/}.mf-box .box{       position: absolute;    width: 100px;    height: 100px;    opacity: 0.8;/*设置每个面的透明度*/}

• 2.2.2 Sub-element transform position

Position:absolute let each face be in the same position first, then rotate () rotate the translate displacement.

The origin of the displacement is at the center of the element, the upper and lower two faces rotate at a certain angle along the x axis, a certain pixel is shifted along the z axis, and the left and right four faces rotate at a certain angle along the y axis, and a certain pixel is shifted along the z axis.

Note: The results of first rotation and re-displacement are different from those of first displacement and rotation. First, the displacement is relative to the axis of rotation after the determination of the position, first displacement and then rotation, displacement is relative to the axis before the rotation of the position.

.mf-box .box1{    transform: rotateY(0)translateZ(50px);}.mf-box .box2{    transform: rotateY(-90deg)translateZ(50px);}.mf-box .box3{    transform: rotateX(90deg)translateZ(50px);}.mf-box .box4{    transform: rotateX(-90deg)translateZ(50px);}.mf-box .box5{    transform: rotateY(90deg)translateZ(50px);}.mf-box .box6{    transform: rotateY(180deg)translateZ(50px);}

• 2.2.3 animation effects

Animating the auto-rotation, adding the animation style to the parent element

.mf-box{    animation: rotate linear 20s infinite;}@-webkit-keyframes rotate{    from{        transform: rotateX(0deg) rotateY(0deg);    }    to{        transform: rotateX(360deg) rotateY(360deg);    }}

• 2.2.4 Mouse Floating effect

Change the value of the Translatez, the distance is increased by one more times, you can achieve the mouse floating to the dice on the dice six sides of the effect of parting.

/*鼠标滑过骰子效果*/.mf-box:hover .box1{    transform: rotateY(0)translateZ(100px);}.mf-box:hover .box2{    transform: rotateY(-90deg)translateZ(100px);}.mf-box:hover .box3{    transform: rotateX(90deg)translateZ(100px);}.mf-box:hover .box4{    transform: rotateX(-90deg)translateZ(100px);}.mf-box:hover .box5{    transform: rotateY(90deg)translateZ(100px);}.mf-box:hover .box6{    transform: rotateY(180deg)translateZ(100px);}

CSS3 Flex layout combined with transform to generate a 3D dice