Shulou(Shulou.com)06/01 Report--

This article mainly introduces how to make the cutting effect of the broadcast picture by CSS3, which is very detailed and has a certain reference value. Interested friends must read it!

Cool CSS3 cutting effect broadcast picture

Html,body,div {

Margin: 0

Padding: 0

}

Body {background-color: # 232323}

. slider-outer {

Width: 560px

Height: 300px

Margin: 150px auto

Background-color: # f60

Position: relative

}

. img-item {

Position: absolute

Width: 112px

Height: 100%

Background-color: # f10

Transition: all 1.5s

/ * set child elements to be rendered in 3D space * /

Transform-style: preserve-3d

}

/ * enable the picture to form a box start*/ with four faces

.img {

Width: 100%

Height: 100%

Position: absolute

Background-size: cover

}

.img:nth-child (1) {

Background: url (images/1.png) no-repeat

Transform: rotateX (0deg) translateZ (150px)

}

.img:nth-child (2) {

Background: url (images/2.png) no-repeat

Transform: rotateX (- 90deg) translateZ (150px)

}

.img:nth-child (3) {

Background: url (images/3.png) no-repeat

Transform: rotateX (- 180deg) translateZ (150px)

}

.img:nth-child (4) {

Background: url (images/4.png) no-repeat

Transform: rotateX (- 270deg) translateZ (150px)

}

/ * enable the picture to form a box end*/ with four faces

.btns {

Position: absolute

Top: 50%

Width: 100%

Height: 70px

Margin-top:-35px

}

.prev

.next {

Width: 70px

Height: 70px

Line-height: 70px

Text-align: center

Background-color: rgba (0pd0j0j0pl .3)

Color: # fff

Font-size: 30px

Cursor: pointer

Position: absolute

}

.prev {

Left: 0

}

.next {

Right: 0

}

$(function () {)

Var num = 0

$("# j_silder_outer. Img-item") .each (function (index, el) {

(this) .css ({

"left": $(this). Width () * index + "px"

/ * delay each img-item to perform animation for a certain period of time * /

"transitionDelay": index * 0.3 + "s"

});

$(this) .find (".img") .css ({

"backgroundPosition":-$(this). Width () * index + "px"

})

});

$(".prev") .on ("click", function () {

$("# j_silder_outer. Img-item") .css ("transform", "rotateX (" + (+ + num * 90) + "deg)")

});

$(".next") .on ("click", function () {

$("# j_silder_outer. Img-item"). Css ("transform", "rotateX (" + (--num * 90) + "deg"))

});

Var timejg=4000;// rotation interval

Var time = setInterval (move,timejg)

Function move () {

$("# j_silder_outer. Img-item"). Css ("transform", "rotateX (" + (--num * 90) + "deg"))

}

$('.slider-outer') .hover (function () {

ClearInterval (time)

}, function () {

Time = setInterval (move,timejg)

});

})

The above is all the content of the article "how to make the cutting effect of CSS3 broadcast picture". Thank you for reading! Hope to share the content to help you, more related knowledge, welcome to follow the industry information channel!

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.