A special effect plug-in based on jQuery and CSS3 Cool 3D rotating Gallery, jquerycss3

A special effect plug-in based on jQuery and CSS3 Cool 3D rotating Gallery, jquerycss3

This is a cool jQuery and CSS 3 3D rotating gallery special effect plug-in. The 3D gallery plug-in allows you to switch between images through the navigation buttons. The effect is similar to that of a carousel. It also provides features such as click-to-zoom in, image title display, and keyboard operations.

Download Online Preview source code

Brief tutorial

This is a very cool jQuery and CSS3 3D rotating gallery special effect plug-in. The first DEMO is a simple example. CSS3 is used to create a 3d Rotation effect, and js is used to control the front and back navigation buttons. The second DEMO is an upgraded version of the first DEMO. It provides other functions such as image title, image viewing, and keyboard control.

HTML Structure

The HTML structure of this 3D gallery is very simple. DEMO1 uses a div as wrapper, which is a figure element and a picture in figure. Each image of DEMO2 uses a separate figure element.

<div id="gallery">    <figure id="spinner">                                                                    </figure></div>

CSS style

CSS style is not complex: the origin of the image and figure Z axis is rotated Px in the direction inside the screen, and a transition with a value of 1 second is provided for figure. The image is set to 40% in width and 30% away from the left side so that they are in the middle of the figure. This setting can make the 3D gallery have a very responsive effect.

body { background: #100000; font-size: 1.5rem; }div#gallery { perspective: 1200px; }figure#spinner { transform-style: preserve-3d; min-height: 122px; transform-origin: 50% 50% -500px; transition: 1s; }figure#spinner img { width: 40%; position: absolute; left: 30%; transform-origin-z: 50% 50% -500px; outline: 1px solid transparent; }

Advanced 3D Gallery

The above are all functions and code of the simple version 3D gallery. DEMO2 is an advanced version of the 3D gallery. It adds some features based on DEMO1:

• Each image is packaged with a separate figure element with its own title (displayed when you move the mouse over the image ).
• The distribution of images is completely produced using javascript, which allows you to process any number of images.
• You can click to enlarge the image.
• You can use the keyboard control: the Z key can zoom in or out the image, and the C key can display or hide the image title.

Browser compatibility

• In the Safari browser of the desktop and mobile devices, the transform-origin-z coordinate of the 3D gallery is replaced to push it forward.
• Because IE10 does not support transform-style, the 3D Gallery displays an error.
• When the number of 3d gallery images increases, the gallery radius increases accordingly.
• In the advanced version, we converted the CSS 3D gallery to the jQuery version of the 3D gallery, so that this effect can be compatible with previous versions of browsers.

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