how to draw 3d cube pattern
Cube
Cards are a practiced get-go for working with 3D transforms, simply they just prove off 3D in transition. To show off 3D at residual, we'll have to create true 3D objects: prisms. We'll offset with a cube.
The markup for the cube is like to the card. This time we need 6 child elements for all vi faces of the cube.
<div grade= "scene" > <div class= "cube" > <div class= "cube__face cube__face--front" >forepart</div> <div class= "cube__face cube__face--back" >back</div> <div grade= "cube__face cube__face--right" >right</div> <div class= "cube__face cube__face--left" >left</div> <div class= "cube__face cube__face--top" >top</div> <div class= "cube__face cube__face--bottom" >bottom</div> </div> </div> front
dorsum
correct
left
top
lesser
Basic position and size styles set up the 6 faces on top of i some other in the container.
.scene { width : 200px ; height : 200px ; perspective : 600px ; } .cube { width : 100% ; pinnacle : 100% ; position : relative ; transform-fashion : preserve-3d ; } .cube__face { position : accented ; width : 200px ; peak : 200px ; } front end
back
correct
left
top
bottom
Now all the faces are placed on top of i another, ready to be rotated. .cube__face--top and .cube__face--bottom will use rotateX() so they are rotated effectually the vertical Ten centrality.
.cube__face--front { transform : rotateY ( 0deg ); } .cube__face--correct { transform : rotateY ( 90deg ); } .cube__face--dorsum { transform : rotateY ( 180deg ); } .cube__face--left { transform : rotateY ( -90deg ); } .cube__face--superlative { transform : rotateX ( 90deg ); } .cube__face--lesser { transform : rotateX ( -90deg ); } front end
dorsum
correct
left
elevation
lesser
(We could remove the rotateY( 0deg) mode, as this transform has no effect, but let's exit it in for consistency.)
Now that faces are rotated, but the front and back faces are visible. The four side faces are all perpendicular to the viewer, so they appear on-border, near-invisible. To push them out to their appropriate sides, they need to be translated out from the center of their positions. Each side of the cube is 200px wide. From the cube's heart they'll demand to be translated out one-half that distance, 100px.
.cube__face--front { transform : rotateY ( 0deg ) translateZ ( 100px ); } .cube__face--right { transform : rotateY ( 90deg ) translateZ ( 100px ); } .cube__face--back { transform : rotateY ( 180deg ) translateZ ( 100px ); } .cube__face--left { transform : rotateY ( -90deg ) translateZ ( 100px ); } .cube__face--height { transform : rotateX ( 90deg ) translateZ ( 100px ); } .cube__face--lesser { transform : rotateX ( -90deg ) translateZ ( 100px ); } front
right
back
left
tiptop
bottom
Annotation hither that the interpret part comes subsequently the rotate. The club of transform functions is meaningful. Each face is get-go rotated towards its position, then translated outward in a split direction.
We take rendered a cube, merely we're not washed even so.
Un-fuzzing 3D transformed text
Take another look at the text "front" in the higher up cube. It'south fuzzy.
3D transforms affect text rendering. When you apply a 3D transform, browsers take a snap-shot of the element and and then re-render those pixels with 3D transforms applied. As such, fonts don't have the same anti-aliasing given their transformed size.
font-size: 2.5em
transform: calibration(2.5)
transform: perspective(500px) translateZ(250px)
For the sake of our users, 3D transforms should non distort the interface. To resolve the baloney and restore pixel perfection to our cube, nosotros can push back the 3D object, and then that the front face volition be positioned back at the Z origin.
.cube { transform : translateZ ( -100px ); } front
correct
back
left
top
lesser
Rotating the cube
To expose whatever confront of the cube, we'll need a style that rotates the cube to show that face. The transform is the reverse of the corresponding face. We toggle the necessary class on the .cube to apply the advisable transform.
.cube.prove-front end { transform : translateZ ( -100px ) rotateY ( 0deg ); } .cube.show-right { transform : translateZ ( -100px ) rotateY ( -90deg ); } .cube.evidence-back { transform : translateZ ( -100px ) rotateY ( -180deg ); } .cube.testify-left { transform : translateZ ( -100px ) rotateY ( 90deg ); } .cube.prove-top { transform : translateZ ( -100px ) rotateX ( -90deg ); } .cube.bear witness-bottom { transform : translateZ ( -100px ) rotateX ( 90deg ); } Notice how the gild of the transform functions has reversed. First we push the object back with translateZ, so we rotate it.
Finishing up, we can add a transition to breathing the rotation between states.
.cube { transition : transform 1s ; } front
back
right
left
top
bottom
Edit this demo on CodePen
Next: Box →
Source: https://3dtransforms.desandro.com/cube
0 Response to "how to draw 3d cube pattern"
Post a Comment