As we know css3 has many awesome features which makes our work easy. CSS 3D Transforms one of them. In past time, we mostly used flash for showing the 3D effect after that Script replaces flash and now the CSS3.

Below is some useful information about 3D transforms, like how is work ?, property, attribute. So here we go -

2D object or effect work on x and y axis and 3D work on x,y and z-axis so, to know 3D effect axis understanding is compulsory.

CSS transform has some property -

Transform - It is used for transformation of an element, it is both for 2D or 3D. In simple word you can move an object as 3d scale, 3d rotate or skew.

Transform-origin - This property is use for to change or manage the position.

Transform-style - This specifies, how nested elements are rendered in 3D space.

Perspective-origin  Specifies the bottom position of 3D elements.

Backface-visibility - Defines whether or not an element should be visible when not facing the screen

Browser Support : -

CSS transforms are work with all modern browser. and you need prefix also -

Example: -

CSS -

#pyramid {
	position: relative;
	margin: 100px auto;
	height: 500px;
	width: 100px;
	-webkit-transform-style: preserve-3d;
	-webkit-animation: spin 10s linear infinite;
	-webkit-transform-origin: 116px 200px 116px;
	-moz-transform-style: preserve-3d;
	-moz-animation: spin 10s linear infinite;
	-moz-transform-origin: 116px 200px 116px;
	-ms-transform-style: preserve-3d;
	-ms-animation: spin 10s linear infinite;
	-ms-transform-origin: 116px 200px 116px;
	transform-style: preserve-3d;
	animation: spin 10s linear infinite;
	transform-origin: 116px 200px 116px;
}
@-webkit-keyframes spin {
	from {
		-webkit-transform: rotateX(0deg) rotateY(0deg) rotateZ(0deg);
	}
	to {
		-webkit-transform: rotateX(360deg) rotateY(360deg) rotateZ(360deg);
	}
}
@-moz-keyframes spin {
	from {
	    -moz-transform: rotateX(0deg) rotateY(0deg) rotateZ(0deg);
	}
	to {
		-moz-transform: rotateX(360deg) rotateY(360deg) rotateZ(360deg);
	}
}
@-ms-keyframes spin {
	from {
		-ms-transform: rotateX(0deg) rotateY(0deg) rotateZ(0deg);
	}
	to {
		-ms-transform: rotateX(360deg) rotateY(360deg) rotateZ(360deg);
	}
}
@keyframes spin {
	from {
		transform: rotateX(0deg) rotateY(0deg) rotateZ(0deg);
	}
	to {
		transform: rotateX(360deg) rotateY(360deg) rotateZ(360deg);
	}
}
#pyramid > div {
	position: absolute;
	border-style: solid;
	border-width: 200px 0 200px 346px;
	-webkit-transform-origin: 0 0;
	-moz-transform-origin: 0 0;
	-ms-transform-origin: 0 0;
	transform-origin: 0 0;
}
/* Put some text on each face */
#pyramid > div:after {
	position: absolute;
	content: "Findnerd.com";
	color: #fff;
	left: -320px;
	text-align: center;
	text-transform:uppercase;
	font-size:30px;
	top:-20px;
}
#pyramid > div:first-child {
	border-color: transparent transparent transparent rgba(50, 50, 50, 0.6);
	-webkit-transform: rotateY(-19.5deg) rotateX(180deg) translateY(-400px);
	-moz-transform: rotateY(-19.5deg) rotateX(180deg) translateY(-400px);
	-ms-transform: rotateY(-19.5deg) rotateX(180deg) translateY(-400px);
	transform: rotateY(-19.5deg) rotateX(180deg) translateY(-400px);
}
#pyramid > div:nth-child(2) {
	border-color: transparent transparent transparent rgba(50, 50, 50, 0.6);
	-webkit-transform: rotateY(90deg) rotateZ(60deg) rotateX(180deg) translateY(-400px);
	-moz-transform: rotateY(90deg) rotateZ(60deg) rotateX(180deg) translateY(-400px);
	-ms-transform: rotateY(90deg) rotateZ(60deg) rotateX(180deg) translateY(-400px);
	transform: rotateY(90deg) rotateZ(60deg) rotateX(180deg) translateY(-400px);
}
#pyramid > div:nth-child(3) {
	border-color: transparent transparent transparent rgba(50, 50, 50, 0.9);
	-webkit-transform: rotateX(60deg) rotateY(19.5deg);
	-moz-transform: rotateX(60deg) rotateY(19.5deg);
	-ms-transform: rotateX(60deg) rotateY(19.5deg);
	transform: rotateX(60deg) rotateY(19.5deg);
}
#pyramid > div:nth-child(4) {
	border-color: transparent transparent transparent rgba(50, 50, 50, 0.8);
	-webkit-transform: rotateX(-60deg) rotateY(19.5deg) translateX(-116px) translateY(-200px) translateZ(326px);
	-moz-transform: rotateX(-60deg) rotateY(19.5deg) translateX(-116px) translateY(-200px) translateZ(326px);
	-ms-transform: rotateX(-60deg) rotateY(19.5deg) translateX(-116px) translateY(-200px) translateZ(326px);
	transform: rotateX(-60deg) rotateY(19.5deg) translateX(-116px) translateY(-200px) translateZ(326px);
}

See the running preview