how to draw 3d cube in html5
Cube
Cards are a proficient start for working with 3D transforms, but they only show off 3D in transition. To show off 3D at residuum, we'll have to create true 3D objects: prisms. We'll beginning with a cube.
The markup for the cube is similar to the menu. This time we need 6 child elements for all vi faces of the cube.
<div course= "scene" > <div course= "cube" > <div course= "cube__face cube__face--forepart" >forepart</div> <div form= "cube__face cube__face--back" >back</div> <div form= "cube__face cube__face--right" >right</div> <div form= "cube__face cube__face--left" >left</div> <div form= "cube__face cube__face--meridian" >tiptop</div> <div grade= "cube__face cube__face--lesser" >bottom</div> </div> </div> front
back
right
left
top
lesser
Basic position and size styles set the 6 faces on top of one another in the container.
.scene { width : 200px ; peak : 200px ; perspective : 600px ; } .cube { width : 100% ; height : 100% ; position : relative ; transform-fashion : preserve-3d ; } .cube__face { position : absolute ; width : 200px ; height : 200px ; } front
back
correct
left
tiptop
bottom
Now all the faces are placed on top of ane another, ready to be rotated. .cube__face--top and .cube__face--bottom will use rotateX() so they are rotated around the vertical 10 centrality.
.cube__face--front { transform : rotateY ( 0deg ); } .cube__face--correct { transform : rotateY ( 90deg ); } .cube__face--back { transform : rotateY ( 180deg ); } .cube__face--left { transform : rotateY ( -90deg ); } .cube__face--pinnacle { transform : rotateX ( 90deg ); } .cube__face--bottom { transform : rotateX ( -90deg ); } front
back
right
left
summit
lesser
(We could remove the rotateY( 0deg) style, equally this transform has no effect, but let's leave it in for consistency.)
Now that faces are rotated, only the forepart and back faces are visible. The 4 side faces are all perpendicular to the viewer, and then they appear on-border, near-invisible. To push them out to their advisable sides, they demand to be translated out from the center of their positions. Each side of the cube is 200px broad. From the cube's centre they'll demand to be 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--dorsum { transform : rotateY ( 180deg ) translateZ ( 100px ); } .cube__face--left { transform : rotateY ( -90deg ) translateZ ( 100px ); } .cube__face--top { transform : rotateX ( 90deg ) translateZ ( 100px ); } .cube__face--bottom { transform : rotateX ( -90deg ) translateZ ( 100px ); } front
correct
back
left
summit
bottom
Note here that the translate function comes after the rotate. The order of transform functions is meaningful. Each face is first rotated towards its position, so translated outward in a separate direction.
We accept rendered a cube, simply we're non done notwithstanding.
Un-fuzzing 3D transformed text
Accept another look at the text "front end" in the in a higher place cube. It's fuzzy.
3D transforms touch on text rendering. When you apply a 3D transform, browsers take a snap-shot of the element and then re-render those pixels with 3D transforms practical. As such, fonts don't have the same anti-aliasing given their transformed size.
font-size: two.5em
transform: calibration(ii.5)
transform: perspective(500px) translateZ(250px)
For the sake of our users, 3D transforms should non misconstrue the interface. To resolve the distortion and restore pixel perfection to our cube, nosotros tin can push back the 3D object, and then that the front face up will be positioned back at the Z origin.
.cube { transform : translateZ ( -100px ); } front
right
back
left
top
bottom
Rotating the cube
To expose any face up of the cube, we'll need a manner that rotates the cube to show that face up. The transform is the contrary of the corresponding confront. We toggle the necessary class on the .cube to apply the appropriate transform.
.cube.show-front { transform : translateZ ( -100px ) rotateY ( 0deg ); } .cube.evidence-right { transform : translateZ ( -100px ) rotateY ( -90deg ); } .cube.testify-back { transform : translateZ ( -100px ) rotateY ( -180deg ); } .cube.show-left { transform : translateZ ( -100px ) rotateY ( 90deg ); } .cube.show-top { transform : translateZ ( -100px ) rotateX ( -90deg ); } .cube.show-bottom { transform : translateZ ( -100px ) rotateX ( 90deg ); } Notice how the order of the transform functions has reversed. Get-go we push the object dorsum with translateZ, so we rotate information technology.
Finishing up, we can add together a transition to animate the rotation between states.
.cube { transition : transform 1s ; } forepart
back
right
left
top
bottom
Edit this demo on CodePen
Next: Box →
Source: https://3dtransforms.desandro.com/cube
ارسال یک نظر for "how to draw 3d cube in html5"