Join the social network of Tech Nerds, increase skill rank, get work, manage projects...
 
  • What is CSS3 3D transform?

    • 0
    • 0
    • 0
    • 0
    • 0
    • 0
    • 0
    • 0
    • 406
    Comment on it

    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 -

    Property Chrome Firefox IE Safari Opera
    transform (3D) 36.0
    12.0 -WebKit-
    12.0 10.0 16.0
    10.0 -moz-
    9.0
    4.0 -WebKit-

    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

 0 Comment(s)

Sign In
                           OR                           
                           OR                           
Register

Sign up using

                           OR                           
Forgot Password
Fill out the form below and instructions to reset your password will be emailed to you:
Reset Password
Fill out the form below and reset your password: