Based on CSS3 3D shutter image transition effect, css33d shutter transition

Based on CSS3 3D shutter image transition effect, css33d shutter transition

You may have seen a lot of blinds made using jQuery on the Internet. Can we use pure CSS to do this? The answer is yes. We can not only make this Louver effect, but also make it responsive.

Download Online Preview source code

HTML structure is the key to making pure CSS blinds. In the html structure, multiple identical images must be used to organize a "Shutter ". In our demo, we need 10 identical blinds to place them in a <figure> label. At the same time, we need 10 other images to be placed on the opposite side of the blinds. Set different classes for each group of images. The Code is as follows:

<figure id="blinds">            …                …    </figure>   

At this time, all shutter slices will be rotated at the same time. You can set a delay time for the transition of each slice to make the "pulsation" effect of the shutter.

#blinds img:nth-child(1), #blinds img:nth-child(11) {    clip: rect(0px, 100px, 840px, 0px);    transform-origin: 50px 0px; }#blinds img:nth-child(2), #blinds img:nth-child(12) {    clip: rect(0px, 200px, 840px, 100px);    transform-origin: 150px 0px;    transition-delay: 100ms; }#blinds img:nth-child(3), #blinds img:nth-child(13) {    clip: rect(0px, 300px, 840px, 200px);    transform-origin: 250px 0px;    transition-delay: 200ms; }…#blinds img:nth-child(10n) {    clip: rect(0px, 1000px, 840px, 900px);    transform-origin: 950px 0px;    transition-delay: 900ms; }              

One of the biggest advantages of using the clip attribute is that it naturally has a responsive effect: if the image is reduced, all slices will be reduced accordingly. View the demo and try to narrow down your browser. When the browser width is less than 500 pixels, there are only five slices in the picture blinds.

Via: http://www.w2bc.com/Article/25379