CSS 3D PENGUIN

3D PENGUIN

Important Points:

• only used 1 div element for each part of the bird (like: 1-div element for  body , 1-div element for 1 ear and so-on).

• for creating 3d effect with 1 element , used ":before" and ":after" CSS element and placed them to form a 3d effect.

• Then used css "transform:rotateX() or rotateY()  and rotateZ()" or even their combination in single element to move the div element in desire form to get 3d like view.

• TIPS: Here doesn't need to make each and every 3d effect for every body part . as just make one > copy it > change its name (according to body part you are making > and then just adjust the size as required for that part and some minor positioning adjustment. This will definitely  save your precious time!

HTML:

CSS:

OUTPUT:

See the Pen 3d_bird by ADITYA RAJ (@aditya9576) on CodePen.