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.