Join the social network of Tech Nerds, increase skill rank, get work, manage projects...
 
  • Pure CSS Animated 3D Pyramid

    • 0
    • 0
    • 0
    • 0
    • 0
    • 0
    • 0
    • 0
    • 1.82k
    Comment on it

    In this blog we will be creating a 3D pyramid which will be rotating around vertical axis, ie, Y-axis and also on its own axis using pure css. The most important properties used in the making of pyramid were : transform-origin, transfrom-style, and transform.

     

    Transform property : is used for the 2D or 3D transformation of an element. With this property we can rotate, scale, move, skew the elements.

    transform: rotateX(0deg) rotateY(40deg);

     

    Transform-origin : with this property we can change the positing of the transformed elements.

    transform-origin: 50% 100% 30px;

     

    CSS Code:

    .container{
    
    	width: 800px;
    	margin: 0px auto;
    			
    }
    
    .pyramid{
    
            height: 230px;
    	left: 0;
    	margin: 0 auto;
    	position: absolute;
    	right: 0;
    	transform: rotateX(0deg) rotateY(40deg);
    	transform-origin: 50% 100% 30px;
    	transform-style: preserve-3d;
    	-webkit-transform-style: preserve-3d;
    	-moz-transform-style: preserve-3d;
    	-ms-transform-style: preserve-3d;
    	width: 1000px;
    	animation-name: rotate;
    	animation-duration: 4s;
    	animation-iteration-count: infinite;
    	animation-timing-function: linear;
    
    }
    
    .pyramid div{	
    
    	width: 0px;
    	height: 0px;
    	border-left: 180px solid transparent; 
    	border-right: 180px solid transparent;
    	border-bottom: 180px solid rgba(255,0,0,0.6);
    	position: absolute;
    	left: 0;
    	transform-origin:  50% 0;
    }
    
    .pyramid div:nth-child(1){
    
    	left: 0;
    	transform: rotateY(-120deg) rotateX(35deg);
        	transform-origin: 100% 100% 0;
    }
    
    .pyramid div:nth-child(2){
    
    	left: 360px;
    	transform: rotateX(35deg);
        	transform-origin: 0 100% 0;
        	border-bottom-color: blue;
    }
    
    .pyramid div:nth-child(3){
    
    	left: 720px;
      	transform: rotateY(120deg) rotateX(35deg);
        	transform-origin: 0 100% 0;
        	border-bottom-color: yellow;
    }
    
    @keyframes rotate{
    
    	from{
    		transform: rotateX(0deg) rotateY(40deg);
    	}
    			
    	to{
    		transform: rotateX(0deg) rotateY(360deg);
    			
    	}
    }
    		

     

    HTML Code:

    <div class="container">
    
    	<div class="pyramid">
    		<div></div>
    		<div></div>
    		<div></div>
    	</div>
    </div>

     

    For output download the file :  pyramid.html

    Happy Coding :)

 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: