Join the social network of Tech Nerds, increase skill rank, get work, manage projects...
 
  • Triangle Shape Images Using CSS3

    • 0
    • 0
    • 0
    • 0
    • 0
    • 0
    • 0
    • 0
    • 392
    Comment on it

    Hello , reader's In my blog I have tried to make triangle images using CSS3 transform, translate and transition property.

     

    I have used transform skew and rotate property for creating the images to look as triangle.

     

    Basically the skew property allow us to skew an element whether on y or x axis using a function as a value for the transform property in the document.

     

    Using the transition property we can change the state of a element over a specified duration .

     

    The rotate property allow us to rotate an element using a function as a value for the transform property in CSS3.

     

    In my code , I need to create a wrap class and applied transform property for a duration of 300ms . I have also adjusted the height and width as required.

     

    Now , nested to the wrapper class I have created a crop class which has a image tag within it.

     

    To the crop class , I have adjusted the required height and width and displayed it to block.

     

    Below is the html code for the above example :-

    <div class='container'>
    
    <div class='wrap'>
    
    <div class='crop'>
    
    <img src="images/1.jpg" alt="img-1">
    
    </div>
    
    </div>
    
    <div class='wrap'>
    
    <div class='crop'>
    
    <img src="images/2.jpg" alt="img-2">
    
    </div>
    
    </div>
    
    <div class='wrap'>
    
    <div class='crop'>
    
    <img src="images/3.jpg" alt="img-3">
    
    </div>
    
    </div>
    
    <div class='wrap'>
    
    <div class='crop'>
    
    <img src="images/4.jpg" alt="img-4">
    
    </div>
    
    </div>
    
    <div class='wrap'>
    
    <div class='crop'>
    
    <img src="images/5.jpg" alt="img-5">
    
    </div>
    
    </div>
    
    <div class='wrap'>
    
    <div class='crop'>
    
    <img src="images/6.jpg" alt="img-6">
    
    </div>
    
    </div>
    
    <div class='wrap'>
    
    <div class='crop'>
    
    <img src="images/7.jpg" alt="img-7">
    
    </div>
    
    </div>
    
    <div class='wrap'>
    
    <div class='crop'>
    
    <img src="images/8.jpg" alt="img-8">
    
    </div>
    
    </div>
    
    </div>
    
    </div>

    The above example includes eight images within a triangle figure and it has been rotated at a degree such that all are placed in an even order to each other .

     

    On hover , the triangle which is been triggered moves either up or down and with the little opacity.


    Below is the CSS code for the example :-

    body {
    
    background: #f1f1fa;
    
    }
    
    
    .container {
    
    margin: 140px auto 0;
    
    font-size: 0;
    
    max-width: 560px;
    
    }
    
    
    .wrap {
    
    -webkit-transform: rotate(45deg) translate3d(0, 0, 0);
    
    -moz-transform: rotate(45deg) translate3d(0, 0, 0);
    
    -ms-transform: rotate(45deg) translate3d(0, 0, 0);
    
    -o-transform: rotate(45deg) translate3d(0, 0, 0);
    
    transform: rotate(45deg) translate3d(0, 0, 0);
    
    display: inline-block;
    
    -webkit-transition: -webkit-transform 300ms ease-out;
    
    -moz-transition: -moz-transform 300ms ease-out;
    
    transition: transform 300ms ease-out;
    
    width: 100px;
    
    }
    
    .wrap:hover {
    
    -webkit-transition: -webkit-transform 700ms ease-out;
    
    -moz-transition: -moz-transform 700ms ease-out;
    
    transition: transform 700ms ease-out;
    
    -webkit-transform: rotate(45deg) translate3d(10px, 10px, 0);
    
    -moz-transform: rotate(45deg) translate3d(10px, 10px, 0);
    
    -ms-transform: rotate(45deg) translate3d(10px, 10px, 0);
    
    -o-transform: rotate(45deg) translate3d(10px, 10px, 0);
    
    transform: rotate(45deg) translate3d(10px, 10px, 0);
    
    }
    
    .wrap:nth-child(even) {
    
    width: 40px;
    
    -webkit-transform: rotate(225deg) translate3d(30px, 120px, 0);
    
    -moz-transform: rotate(225deg) translate3d(30px, 120px, 0);
    
    -ms-transform: rotate(225deg) translate3d(30px, 120px, 0);
    
    -o-transform: rotate(225deg) translate3d(30px, 120px, 0);
    
    transform: rotate(225deg) translate3d(30px, 120px, 0);
    
    }
    
    .wrap:nth-child(even) .crop img {
    
    -webkit-transform: skew(-20deg, -20deg) rotate(-225deg);
    
    -moz-transform: skew(-20deg, -20deg) rotate(-225deg);
    
    -ms-transform: skew(-20deg, -20deg) rotate(-225deg);
    
    -o-transform: skew(-20deg, -20deg) rotate(-225deg);
    
    transform: skew(-20deg, -20deg) rotate(-225deg);
    
    }
    
    .wrap:nth-child(even):hover {
    
    -webkit-transform: rotate(225deg) translate3d(40px, 130px, 0);
    
    -moz-transform: rotate(225deg) translate3d(40px, 130px, 0);
    
    -ms-transform: rotate(225deg) translate3d(40px, 130px, 0);
    
    -o-transform: rotate(225deg) translate3d(40px, 130px, 0);
    
    transform: rotate(225deg) translate3d(40px, 130px, 0);
    
    }
    
    .crop {
    
    position: relative;
    
    width: 160px;
    
    height: 160px;
    
    margin: 0;
    
    display: block;
    
    overflow: hidden;
    
    -webkit-transform: skew(20deg, 20deg) translate3d(0, 0, 0);
    
    -moz-transform: skew(20deg, 20deg) translate3d(0, 0, 0);
    
    -ms-transform: skew(20deg, 20deg) translate3d(0, 0, 0);
    
    -o-transform: skew(20deg, 20deg) translate3d(0, 0, 0);
    
    transform: skew(20deg, 20deg) translate3d(0, 0, 0);
    
    }
    
    .crop img {
    
    width: 160px;
    
    height: 160px;
    
    position: absolute;
    
    left: -50%;
    
    margin-top: 36px;
    
    margin-left: 36px;
    
    top: -50%;
    
    -webkit-transform: skew(-20deg, -20deg) rotate(-45deg);
    
    -moz-transform: skew(-20deg, -20deg) rotate(-45deg);
    
    -ms-transform: skew(-20deg, -20deg) rotate(-45deg);
    
    -o-transform: skew(-20deg, -20deg) rotate(-45deg);
    
    transform: skew(-20deg, -20deg) rotate(-45deg);
    
    opacity: 0.7;
    
    -webkit-transition: opacity 300ms ease-in-out;
    
    -moz-transition: opacity 300ms ease-in-out;
    
    transition: opacity 300ms ease-in-out;
    
    }
    
    .crop img:hover {
    
    opacity: 1;
    
    }
    
    


     

    Conclusion :-

    Hence, I have created triangle shaped images using CSS3 transform , translate 3D , transition and rotate property for all modern browsers.

 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: