Use CSS3 to implement the 3D image slider effect [Download source code]

With the 3D transformation feature of CSS3, we can achieve some novel effects by changing elements in 3D space. This article sharesJQueryThe three-dimensional image slider plug-in uses the 3D transforms (Transform) attribute to achieve a variety of effects.

Tip: to ensure the best results, visit modern browsers such as IE10 +, Chrome, Firefox, and Safari.

 

<Ul id = "sb-slider" class = "sb-slider"> <li> <a href = "#" target = "_ blank"> </a> <div class = "sb-description">

You can also use a DIV with class "sb-description" to add a description for the image. As shown in this example, you can also add an anchor around the image. Then you can call the plug-in:

$('#sb-slider').slicebox();

Slicebox is equipped with a set of options, you can adjust to achieve different types of effects, each option and role is as follows:

$. Slicebox. defaults = {// direction (v) ertical, (h) orizontal or (r) andom orientation: 'V', // The distance from the element to the view, in pixels: perspective: 1200, // slice, number of cubes cuboidsCount: 5, // random cuboidsRandom: false, // maximum number of cubes maxCuboidsCount: 5, disperseFactor: 0, // hide the color of the slider colorHiddenSides: '#222', sequentialFactor: 150, // animation speed: 600, // transition effect easing: 'weight ', // automatic playback autoplay: false, // rotation interval: 3000, // fade-in and fade-out speed fallbackFadeSpeed: 300, // callback function onBeforeChange: function (position) {return false ;}, onAfterChange: function (position) {return false ;}};

 

Online Demo of source code download

 

Articles you may be interested in

• Awesome! Amazing page switching animation effects [Download source code]
• Unlimited creativity! A set of webpage sidebar transition animations [download with source code]
• It's really good! 13 very dynamic page loading animation Effects
• Have you ever seen it? 9 superb check box Effects
• Fashion design! Three special grid loading effects (source code download]

 

Link to this article: jQuery & CSS3 implements 3D image slider via codrops

Source: Dream sky ◆ focus on front-end development technology ◆ share web design resources

This article from [dream sky (http://www.cnblogs.com/lhb25 )]