how to draw 3d cube patterns
Cube
Cards are a expert start for working with 3D transforms, but they only show off 3D in transition. To bear witness off 3D at rest, we'll have to create true 3D objects: prisms. We'll commencement with a cube.
The markup for the cube is like to the bill of fare. This fourth dimension nosotros need 6 child elements for all vi faces of the cube.
<div class= "scene" > <div class= "cube" > <div class= "cube__face cube__face--front" >front</div> <div class= "cube__face cube__face--back" >dorsum</div> <div course= "cube__face cube__face--right" >correct</div> <div form= "cube__face cube__face--left" >left</div> <div grade= "cube__face cube__face--summit" >pinnacle</div> <div class= "cube__face cube__face--bottom" >bottom</div> </div> </div> forepart
back
correct
left
pinnacle
bottom
Basic position and size styles set up the 6 faces on elevation of i another in the container.
.scene { width : 200px ; height : 200px ; perspective : 600px ; } .cube { width : 100% ; height : 100% ; position : relative ; transform-style : preserve-3d ; } .cube__face { position : absolute ; width : 200px ; acme : 200px ; } front end
back
right
left
top
lesser
At present all the faces are placed on top of 1 another, ready to be rotated. .cube__face--top and .cube__face--bottom volition use rotateX() so they are rotated around the vertical 10 axis.
.cube__face--front end { transform : rotateY ( 0deg ); } .cube__face--right { transform : rotateY ( 90deg ); } .cube__face--dorsum { transform : rotateY ( 180deg ); } .cube__face--left { transform : rotateY ( -90deg ); } .cube__face--top { transform : rotateX ( 90deg ); } .cube__face--lesser { transform : rotateX ( -90deg ); } forepart
dorsum
right
left
top
lesser
(Nosotros could remove the rotateY( 0deg) style, as this transform has no upshot, but permit'south exit it in for consistency.)
Now that faces are rotated, only the front and back faces are visible. The 4 side faces are all perpendicular to the viewer, so they appear on-edge, well-nigh-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 need to exist translated out one-half that distance, 100px.
.cube__face--forepart { transform : rotateY ( 0deg ) translateZ ( 100px ); } .cube__face--correct { transform : rotateY ( 90deg ) translateZ ( 100px ); } .cube__face--back { transform : rotateY ( 180deg ) translateZ ( 100px ); } .cube__face--left { transform : rotateY ( -90deg ) translateZ ( 100px ); } .cube__face--superlative { transform : rotateX ( 90deg ) translateZ ( 100px ); } .cube__face--bottom { transform : rotateX ( -90deg ) translateZ ( 100px ); } front
right
back
left
top
lesser
Notation here that the translate function comes later on the rotate. The order of transform functions is meaningful. Each face is first rotated towards its position, and so translated outward in a carve up direction.
We take rendered a cube, but nosotros're non washed all the same.
Un-fuzzing 3D transformed text
Take another wait at the text "front" in the in a higher place cube. Information technology'south fuzzy.
3D transforms affect text rendering. When you apply a 3D transform, browsers accept a snap-shot of the element and and then re-render those pixels with 3D transforms applied. Equally such, fonts don't accept the same anti-aliasing given their transformed size.
font-size: 2.5em
transform: scale(2.v)
transform: perspective(500px) translateZ(250px)
For the sake of our users, 3D transforms should not misconstrue the interface. To resolve the baloney and restore pixel perfection to our cube, we can push dorsum the 3D object, then that the front confront will be positioned back at the Z origin.
.cube { transform : translateZ ( -100px ); } front
right
back
left
top
bottom
Rotating the cube
To expose whatever face of the cube, nosotros'll need a fashion that rotates the cube to show that face up. The transform is the opposite of the corresponding face up. We toggle the necessary grade on the .cube to utilize the advisable transform.
.cube.show-front { transform : translateZ ( -100px ) rotateY ( 0deg ); } .cube.show-right { transform : translateZ ( -100px ) rotateY ( -90deg ); } .cube.prove-back { transform : translateZ ( -100px ) rotateY ( -180deg ); } .cube.show-left { transform : translateZ ( -100px ) rotateY ( 90deg ); } .cube.testify-top { transform : translateZ ( -100px ) rotateX ( -90deg ); } .cube.testify-bottom { transform : translateZ ( -100px ) rotateX ( 90deg ); } Find how the society of the transform functions has reversed. First nosotros push the object back with translateZ, then we rotate information technology.
Finishing up, we tin can add a transition to animate the rotation between states.
.cube { transition : transform 1s ; } forepart
back
correct
left
meridian
bottom
Edit this demo on CodePen
Side by side: Box →
Source: https://3dtransforms.desandro.com/cube
0 Response to "how to draw 3d cube patterns"
ارسال یک نظر