CodePen Embed - CSS only; 3D Home Icon Concept

//- Just 'Hover' on the icon

.lawn
	.home
		.floor
		//- Left wall: out
		.wall-1
		//- Left wall: in
		.wall-2
		//- Rear wall: out
		.wall-3
		//- Rear wall: in
		.wall-4
		//- Right wall: out
		.wall-5
		//- Right wall: in
		.wall-6
		//- Front wall 1: out
		.wall-7-1
		//- Front wall 2: out
		.wall-7-2
		//- Front wall 3: out
		.wall-7-3
		//- Front wall 4: out
		.wall-7-4
		//- Front wall 5: out
		.wall-7-5
		//- Front wall 1: in
		.wall-8-1
		//- Front wall 2: in
		.wall-8-2
		//- Front wall 3: in
		.wall-8-3
		//- Front wall 4: in
		.wall-8-4
		//- Front wall 5: in
		.wall-8-5
		.door
		.window
		//- Front roof: out
		.roof-1
		//- Front roof: in
		.roof-2
		//- Rear roof: out
		.roof-3
		//- Rear roof: in
		.roof-4
		//- Top roof: bottom left
		.roof-5
		//- Top roof: bottom right
		.roof-6
		//- Top roof: top left
		.roof-7
		//- Top roof: top right
		.roof-8
		//- Top roof: left
		.roof-9
		//- Top roof: right
		.roof-10
		//- Top roof front left: rear
		.roof-11
		//- Top roof front left: front
		.roof-12
		//- Top roof front right: rear
		.roof-13
		//- Top roof front right: front
		.roof-14
		//- Top roof front left front: top
		.roof-15
		//- Top roof front left front: left
		.roof-16
		//- Top roof front left front: bottom
		.roof-17
		//- Top roof front right front: top
		.roof-18
		//- Top roof front right front: left
		.roof-19
		//- Top roof front right front: bottom
		.roof-20
		//- Top roof rear left: rear
		.roof-21
		//- Top roof rear left: front
		.roof-22
		//- Top roof rear right: rear
		.roof-23
		//- Top roof rear right: front
		.roof-24
		//- Top roof rear left rear: top
		.roof-25
		//- Top roof rear left rear: left
		.roof-26
		//- Top roof rear left rear: bottom
		.roof-27
		//- Top roof rear right rear: top
		.roof-28
		//- Top roof rear right rear: left
		.roof-29
		//- Top roof rear right rear: bottom
		.roof-30
		//- chimney: left
		.chimney-1
		//- chimney: rear
		.chimney-2
		//- chimney: right
		.chimney-3
		//- chimney: front
		.chimney-4
		//- chimney: top
		.chimney-5

View Compiled

// Just 'Hover' on the icon

$lawn-size: 60;

$floor-color: #875608;

$wall-color: #fffbb4;
$wall-color-2: #b5b26d;

$door-color: #904000;

$window-color: rgba(#44eaff, 0.5);

$roof-color: #de0a0a;
$roof-color-2: #ce9d00;

$chimney-color: #9d2d00;
$chimney-color-2: #641d00;

@mixin build($background-color, $width, $height, $top, $left) {
	background-color: $background-color;
	width: $width;
	height: $height;
	position: absolute;
	top: $top;
	left: $left;
	transform-style: preserve-3d;
}

html, body {
	width: 100%;
	height: 100%;
	padding: 0;
	margin: 0;
}

body {
	background-color: #3e8200;
	display: flex;
	align-items: center;
	justify-content: center;
	overflow: hidden;
	perspective: 500px;
}

.lawn {
	background-color: #9aeb0d;
	width: #{$lawn-size}vw;
	height: #{$lawn-size}vw;
	max-width: #{$lawn-size}vh;
	max-height: #{$lawn-size}vh;
	display: flex;
	align-items: center;
	justify-content: center;
	border-radius: 50%;
	transform-style: preserve-3d;
	transform: rotateX(60deg) rotateZ(0deg);
	transition: transform 1250ms ease-in-out;
	&:hover {
		transform: rotateX(70deg) rotateZ(-340deg) scaleX(1.4) scaleY(1.6);
		.door {
			transition: transform 500ms ease-out 1450ms;
			transform: rotateX(-90deg) rotateY(180deg) rotateY(-70deg);
		}
	}
}

.home {
	width: 40%;
	height: 40%;
	position: relative;
	transform-style: preserve-3d;
}

.floor {
	@include build($floor-color, 100%, 100%, 0, 0);
}

.wall-1 {
	@include build($wall-color, 70%, 100%, 0, 0);
	transform-origin: top left;
	transform: rotateY(-90deg);
	backface-visibility: hidden;
}

.wall-2 {
	@include build($wall-color-2, 70%, 100%, 0, 0);
	transform-origin: top left;
	transform: rotateY(-90deg) rotateX(180deg) translateY(-100%);
	backface-visibility: hidden;
}

.wall-3 {
	@include build($wall-color, 100%, 70%, 0, 0);
	transform-origin: top left;
	transform: rotateX(90deg);
	backface-visibility: hidden;
}

.wall-4 {
	@include build($wall-color-2, 100%, 70%, 0, 0);
	transform-origin: top left;
	transform: rotateX(-90deg) translateY(-100%);
	backface-visibility: hidden;
}

.wall-5 {
	@include build($wall-color, 70%, 100%, 0, 30%);
	transform-origin: top right;
	transform: rotateY(90deg);
	backface-visibility: hidden;
}

.wall-6 {
	@include build($wall-color-2, 70%, 100%, 0, 30%);
	transform-origin: top right;
	transform: rotateY(-90deg) translateX(100%);
	backface-visibility: hidden;
}

.wall-7-1 {
	@include build($wall-color, 10%, 70%, 30%, 0);
	transform-origin: bottom right;
	transform: rotateX(-90deg);
	backface-visibility: hidden;
}

.wall-7-2 {
	@include build($wall-color, 10%, 70%, 30%, 40%);
	transform-origin: bottom right;
	transform: rotateX(-90deg);
	backface-visibility: hidden;
}

.wall-7-3 {
	@include build($wall-color, 10%, 70%, 30%, 90%);
	transform-origin: bottom right;
	transform: rotateX(-90deg);
	backface-visibility: hidden;
}

.wall-7-4 {
	@include build($wall-color, 100%, 10%, 90%, 0%);
	transform-origin: bottom right;
	transform: rotateX(-90deg) translateY(-600%);
	backface-visibility: hidden;
}

.wall-7-5 {
	@include build($wall-color, 60%, 20%, 80%, 40%);
	transform-origin: bottom right;
	transform: rotateX(-90deg);
	backface-visibility: hidden;
}

.wall-8-1 {
	@include build($wall-color-2, 10%, 70%, 30%, 0);
	transform-origin: bottom right;
	transform: rotateX(90deg) translateY(100%);
	backface-visibility: hidden;
}

.wall-8-2 {
	@include build($wall-color-2, 10%, 70%, 30%, 40%);
	transform-origin: bottom right;
	transform: rotateX(90deg) translateY(100%);
	backface-visibility: hidden;
}

.wall-8-3 {
	@include build($wall-color-2, 10%, 70%, 30%, 90%);
	transform-origin: bottom right;
	transform: rotateX(90deg) translateY(100%);
	backface-visibility: hidden;
}

.wall-8-4 {
	@include build($wall-color-2, 100%, 10%, 90%, 0%);
	transform-origin: bottom right;
	transform: rotateX(90deg) translateY(700%);
	backface-visibility: hidden;
}

.wall-8-5 {
	@include build($wall-color-2, 60%, 20%, 80%, 40%);
	transform-origin: bottom right;
	transform: rotateX(90deg) translateY(100%);
	backface-visibility: hidden;
}

.door {
	@include build($door-color, 30%, 60%, 41%, -20%);
	transform-origin: bottom right;
	transform: rotateX(-90deg) rotateY(180deg);
	transition: transform 500ms ease-out;
}

.window {
	@include build($window-color, 40%, 40%, 61%, 50%);
	transform-origin: bottom right;
	transform: rotateX(90deg) translateY(150%);
}

.roof-1 {
	@include build(transparent, 70.5%, 70.5%, 30%, 0);
	transform-origin: bottom left;
	transform: rotateX(-90deg) rotateZ(45deg) translateX(-71.5%) translateY(-71.5%);
	overflow: hidden;
	backface-visibility: hidden;
	&:after {
		@include build($wall-color, 150%, 150%, 0, 0);
		content: '';
		transform: rotateZ(45deg) translateX(-70%) translateY(0%);
	}
}

.roof-2 {
	@include build(transparent, 70.5%, 70.5%, 30%, 0);
	transform-origin: bottom left;
	transform: rotateX(90deg) rotateZ(45deg) translateX(71.5%) translateY(71.5%);
	overflow: hidden;
	backface-visibility: hidden;
	&:after {
		@include build($wall-color-2, 150%, 150%, 0, 0);
		content: '';
		transform: rotateZ(45deg) translateX(25%) translateY(0%);
	}
}

.roof-3 {
	@include build(transparent, 71.5%, 71.5%, -71%, 0);
	transform-origin: bottom left;
	transform: rotateX(90deg) rotateZ(45deg) translateX(70%) translateY(70%);
	overflow: hidden;
	backface-visibility: hidden;
	&:after {
		@include build($wall-color, 150%, 150%, 0, 0);
		content: '';
		transform: rotateZ(45deg) translateX(20%) translateY(0%);
	}
}

.roof-4 {
	@include build(transparent, 71.5%, 71.5%, -71%, 0);
	transform-origin: bottom left;
	transform: rotateX(-90deg) rotateZ(45deg) translateX(-70%) translateY(-70%);
	overflow: hidden;
	backface-visibility: hidden;
	&:after {
		@include build($wall-color-2, 150%, 150%, 0, 0);
		content: '';
		transform: rotateZ(45deg) translateX(-70%) translateY(0%);
	}
}

.roof-5 {
	@include build($roof-color, 80%, 100%, 0, -71.5%);
	transform-origin: top left;
	transform: rotateY(-45deg) translateX(115%);
}

.roof-6 {
	@include build($roof-color, 80%, 100%, 0, 91.5%);
	transform-origin: top right;
	transform: rotateY(45deg) translateX(-115%);
}

.roof-7 {
	@include build($roof-color, 80%, 100%, 0, -81.5%);
	transform-origin: top left;
	transform: rotateY(-45deg) translateX(132.5%);
}

.roof-8 {
	@include build($roof-color, 80%, 100%, 0, 101.5%);
	transform-origin: top right;
	transform: rotateY(45deg) translateX(-132.5%);
}

.roof-9 {
	@include build($roof-color, 10%, 100%, 0, -6.5%);
	transform-origin: top left;
	transform: rotateY(-90deg) translateX(620%);
}

.roof-10 {
	@include build($roof-color, 10%, 100%, 0, 96%);
	transform-origin: top right;
	transform: rotateY(-90deg) translateX(760%);
}

.roof-11 {
	@include build($roof-color-2, 57%, 20%, 100%, -7.5%);
	transform-origin: top left;
	transform: rotateX(90deg) skewY(45deg) translateY(300%);
}

.roof-12 {
	@include build($roof-color-2, 57%, 20%, 105%, -7.5%);
	transform-origin: top left;
	transform: rotateX(90deg) skewY(45deg) translateY(300%);
}

.roof-13 {
	@include build($roof-color-2, 57%, 20%, 100%, 49.5%);
	transform-origin: top right;
	transform: rotateX(90deg) skewY(-45deg) translateY(300%);
}

.roof-14 {
	@include build($roof-color-2, 57%, 20%, 105%, 49.5%);
	transform-origin: top right;
	transform: rotateX(90deg) skewY(-45deg) translateY(300%);
}

.roof-15 {
	@include build($roof-color-2, 81%, 5%, 100%, -87%);
	transform-origin: top left;
	transform: rotateY(-45deg) translateX(140%);
}

.roof-16 {
	@include build($roof-color-2, 20%, 5%, 100%, -7%);
	transform-origin: top left;
	transform: rotateY(-90deg) translateX(305%);
}

.roof-17 {
	@include build($roof-color-2, 81%, 5%, 100%, -69%);
	transform-origin: top left;
	transform: rotateY(-45deg) translateX(107%);
}

.roof-18 {
	@include build($roof-color-2, 81%, 5%, 100%, 106%);
	transform-origin: top right;
	transform: rotateY(45deg) translateX(-140%);
}

.roof-19 {
	@include build($roof-color-2, 20%, 5%, 100%, 87%);
	transform-origin: top right;
	transform: rotateY(-90deg) translateX(405%);
}

.roof-20 {
	@include build($roof-color-2, 81%, 5%, 100%, 87%);
	transform-origin: top right;
	transform: rotateY(45deg) translateX(-108%);
}

.roof-21 {
	@include build($roof-color-2, 57%, 20%, 0%, -7.5%);
	transform-origin: top left;
	transform: rotateX(90deg) skewY(45deg) translateY(300%);
}

.roof-22 {
	@include build($roof-color-2, 57%, 20%, -5%, -7.5%);
	transform-origin: top left;
	transform: rotateX(90deg) skewY(45deg) translateY(300%);
}

.roof-23 {
	@include build($roof-color-2, 57%, 20%, 0%, 49.5%);
	transform-origin: top right;
	transform: rotateX(90deg) skewY(-45deg) translateY(300%);
}

.roof-24 {
	@include build($roof-color-2, 57%, 20%, -5%, 49.5%);
	transform-origin: top right;
	transform: rotateX(90deg) skewY(-45deg) translateY(300%);
}

.roof-25 {
	@include build($roof-color-2, 81%, 5%, -5%, -87%);
	transform-origin: top left;
	transform: rotateY(-45deg) translateX(140%);
}

.roof-26 {
	@include build($roof-color-2, 20%, 5%, -5%, -7%);
	transform-origin: top left;
	transform: rotateY(-90deg) translateX(305%);
}

.roof-27 {
	@include build($roof-color-2, 81%, 5%, -5%, -69%);
	transform-origin: top left;
	transform: rotateY(-45deg) translateX(107%);
}

.roof-28 {
	@include build($roof-color-2, 81%, 5%, -5%, 106%);
	transform-origin: top right;
	transform: rotateY(45deg) translateX(-140%);
}

.roof-29 {
	@include build($roof-color-2, 20%, 5%, -5%, 87%);
	transform-origin: top right;
	transform: rotateY(-90deg) translateX(405%);
}

.roof-30 {
	@include build($roof-color-2, 81%, 5%, -5%, 87%);
	transform-origin: top right;
	transform: rotateY(45deg) translateX(-108%);
}

.chimney-1 {
	@include build($chimney-color, 140%, 20%, 20%, 70%);
	transform-origin: top left;
	transform: rotateY(-90deg);
}

.chimney-2 {
	@include build($chimney-color, 140%, 20%, 20%, 90%);
	transform-origin: top left;
	transform: rotateX(90deg) rotateZ(90deg);
}

.chimney-3 {
	@include build($chimney-color, 140%, 20%, 20%, 90%);
	transform-origin: top left;
	transform: rotateY(-90deg);
}

.chimney-4 {
	@include build($chimney-color, 140%, 20%, 40%, 90%);
	transform-origin: top left;
	transform: rotateX(90deg) rotateZ(90deg);
}

.chimney-5 {
	@include build($chimney-color-2, 20%, 20%, 20%, 70%);
	transform-origin: top left;
	transform: rotateX(-90deg) translateY(-680%) rotateX(90deg);
}

View Compiled

// Just 'Hover' on the icon

View Compiled

This Pen is owned by Takane Ichinose on CodePen.

See more by @takaneichinose on CodePen

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.