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:

	<!DOCTYPE html>
	<html>

	<head>
	<title>Page Title</title>
	</head>

	<body>
	<div class="all">
	<div class="bird">
	<div class="full"></div>
	</div>
	<div class="head"></div>
	<div class="eye1">
	<div class="pupil1"></div>
	</div>
	<div class="eye2">
	<div class="pupil2"></div>
	</div>
	<div class="ear1"></div>
	<div class="ear2"></div>
	<div class="mouth"></div>
	<div class="patch"></div>
	<div class="leg1"></div>
	<div class="leg2"></div>
	</div>

	</body>

	</html>

view raw 3d_bird.html hosted with ❤ by GitHub

CSS:

	body {
	background-color: #0cd6fa;
	background-image: url("https://i.ibb.co/2Wsf2Vv/snow1.png");
	}


	.all {
	position: absolute;
	left: 55%;
	top: 55%;
	transform: translate(-50%, -50%);
	}

	/full_body/

	.full {
	width: 103px;
	height: 110px;
	background-color: #363636;
	transform: skewY(-15deg);
	}

	.full:before {
	position: absolute;
	content: " ";
	width: 103px;
	height: 81px;
	background-color: #3e3e3e;
	transform: skewX(40deg);
	top: -80px;
	left: -33px;
	}

	.full:after {
	position: absolute;
	content: " ";
	width: 132px;
	height: 154px;
	background-color: #212121;
	transform: rotateX(-44deg) rotateY(-59.7deg);
	left: -99px;
	top: -61.3px;
	}

	/head/

	.head {
	width: 18px;
	height: 40px;
	background-color: #efebe9;
	transform: skewY(-15deg);
	position: absolute;
	top: -57px;
	left: 35px;
	}

	.head:before {
	position: absolute;
	content: " ";
	width: 18px;
	height: 15px;
	background-color: #f2f2f2;
	transform: skewX(40deg);
	top: -15px;
	left: -6px;
	}

	.head:after {
	position: absolute;
	content: " ";
	width: 23px;
	height: 57px;
	background-color: #c8bbbd;
	transform: rotateX(-44deg) rotateY(-59.7deg);
	left: -17.5px;
	top: -16px;
	}

	/eye/

	.eye1 {
	width: 20px;
	height: 25px;
	background-color: #f5f3f3;
	transform: skewY(-15deg);
	position: absolute;
	top: 30px;
	left: 20px;
	}

	.eye1:before {
	position: absolute;
	content: " ";
	width: 21px;
	height: 6px;
	background-color: #fffdfe;
	transform: skewX(40deg);
	top: -6px;
	left: -4px;
	}

	.eye1:after {
	position: absolute;
	content: " ";
	width: 12px;
	height: 35px;
	background-color: #c7bdbe;
	transform: rotateX(-44deg) rotateY(-59.7deg);
	left: -8.8px;
	top: -8px;
	}

	.eye2 {
	width: 20px;
	height: 25px;
	background-color: #f5f3f3;
	transform: skewY(-15deg);
	position: absolute;
	top: 15px;
	left: 70px;
	}

	.eye2:before {
	position: absolute;
	content: " ";
	width: 21px;
	height: 6px;
	background-color: #fffdfe;
	transform: skewX(40deg);
	top: -6px;
	left: -4px;
	}

	.eye2:after {
	position: absolute;
	content: " ";
	width: 12px;
	height: 35px;
	background-color: #c7bdbe;
	transform: rotateX(-44deg) rotateY(-59.7deg);
	left: -8.8px;
	top: -8px;
	}

	/pupiL/

	.pupil1 {
	position: relative;
	width: 11px;
	height: 7px;
	background-color: #493739;
	top: 13px;
	left: 7px;
	}

	.pupil1:before {
	position: absolute;
	content: " ";
	width: 7px;
	height: 10px;
	background-color: #493739;
	top: -4px;
	left: 4px;
	}

	.pupil2 {
	position: relative;
	width: 11px;
	height: 7px;
	background-color: #493739;
	top: 13px;
	left: 7px;
	}

	.pupil2:before {
	position: absolute;
	content: " ";
	width: 7px;
	height: 10px;
	background-color: #493739;
	top: -4px;
	left: 4px;
	}

	/ear/

	.ear1 {
	width: 24px;
	height: 15px;
	background: linear-gradient(
	#373737 0px 5px,
	white 5px 10px,
	#373737 10px 15px
	);
	transform: skewY(-15deg);
	position: absolute;
	top: 65px;
	left: -24px;
	}

	.ear1:before {
	position: absolute;
	content: " ";
	width: 25px;
	height: 50px;
	background-color: #424242;
	transform: skewX(40deg);
	top: -50px;
	left: -22px;
	}

	.ear1:after {
	position: absolute;
	content: " ";
	width: 80px;
	height: 20px;
	background: linear-gradient(
	#373737 0px 8px,
	#c5bcbf 8px 15px,
	#373737 12.9px 20px
	);
	transform: rotateX(-44deg) rotateY(-59.7deg);
	left: -60px;
	top: -28px;
	}

	.ear2 {
	width: 22px;
	height: 15px;
	background: linear-gradient(
	#373737 0px 8px,
	white 8px 15px,
	#373737 12.9px 20px
	);
	transform: skewY(-15deg);
	position: absolute;
	top: 28px;
	left: 106px;
	}

	.ear2:before {
	position: absolute;
	content: " ";
	width: 0px;
	height: 0px;
	border-right: 25px solid transparent;
	border-bottom: 20px solid #424242;
	top: -20px;
	left: -3px;
	z-index: 20;
	}

	.ear2:after {
	position: absolute;
	content: " ";
	width: 8px;
	height: 20px;
	background: linear-gradient(
	#373737 0px 8px,
	#c5bcbf 8px 15px,
	#373737 12.9px 20px
	);
	transform: rotateX(-44deg) rotateY(-59.7deg);
	left: -6px;
	top: -4px;
	}
	.mouth {
	width: 52px;
	height: 8px;
	background-color: #e99136;
	transform: skewY(-15deg);
	position: absolute;
	top: 70px;
	left: 46px;
	}

	.mouth:before {
	position: absolute;
	content: " ";
	width: 52px;
	height: 20px;
	background-color: #d37d2f;
	transform: skewX(40deg);
	top: -20px;
	left: -7px;
	}

	.mouth:after {
	position: absolute;
	content: " ";
	width: 30px;
	height: 13px;
	background-color: #a8611b;
	transform: rotateX(-44deg) rotateY(-59.7deg);
	left: -23px;
	top: -13px;
	}

	.patch {
	width: 52px;
	height: 20px;
	background-color: white;
	transform: skewY(-15deg);
	position: absolute;
	top: 88.5px;
	left: 30px;
	}

	.leg1 {
	width: 35px;
	height: 8px;
	background: #f9aa34;
	transform: skewY(-15deg);
	position: absolute;
	top: 121px;
	left: -5px;
	}

	.leg1:before {
	position: absolute;
	content: " ";
	width: 5px;
	height: 48px;
	background-color: #ffb74d;
	transform: skewX(40deg);
	top: -48px;
	left: -20px;
	}

	.leg1:after {
	position: absolute;
	content: " ";
	width: 80px;
	height: 10px;
	background: #d37820;
	transform: rotateX(-44deg) rotateY(-59.7deg);
	left: -60px;
	top: -25px;
	}

	.leg2 {
	width: 35px;
	height: 8px;
	background: #f9aa34;
	transform: skewY(-15deg);
	position: absolute;
	top: 105px;
	left: 68px;
	}

	.leg2:before {
	position: absolute;
	content: " ";
	width: 35px;
	height: 5px;
	background-color: #ffb74d;
	transform: skewX(40deg);
	top: -5px;
	left: -2px;
	}

	.leg2:after {
	position: absolute;
	content: " ";
	width: 9px;
	height: 11px;
	background: #d37820;
	transform: rotateX(-44deg) rotateY(-59.7deg);
	left: -6px;

	top: -4px;
	}