A jquery-based and CSS3 cool 3D rotary Gallery Effect Plugin

This is an effect-cool jquery and CSS3 3D rotary Gallery Effect plugin. The 3D Gallery plugin can be used to toggle the image through the front and back navigation buttons, as well as the carousel. It also features a click to enlarge the image, display the title of the picture, and operate with the keyboard.

Online preview Source Download

Brief tutorials

This is a very cool effect of jquery and CSS3 3D rotary Gallery Effect plug-in. The first demo is a simple example of using CSS3 to create a 3d rotation effect, and then use JS to control the front and back navigation buttons. The second demo is an upgraded version of the first demo, which adds additional features such as picture titles, viewing pictures, keyboard controls, and more.

HTML structure

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

<DivID= "Gallery">    < FigureID= "Spinner">        <imgsrc= "1.jpg"alt="">        <imgsrc= "2.jpg"alt="">        <imgsrc= "3.jpg"alt="">        <imgsrc= "4.jpg"alt="">        <imgsrc= "5.jpg"alt="">        <imgsrc= "6.jpg"alt="">        <imgsrc= "7.jpg"alt="">        <imgsrc= "8.jpg"alt="">    </ Figure></Div>

CSS Styles

CSS styles are also not complicated: The origin of the image and figure Z-axis is rotated 500px in the direction of the screen and provides a transition with a value of 1 seconds . The picture is set to a width of 40% and a distance of 30% from the left so that they are positioned in the middle of the figure . This setting allows the 3D gallery to have a very good 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

These are all the features and codes of the Simple 3D Gallery, DEMO2 is an advanced version of the 3D Gallery, which adds some features to the DEMO1 base:

• Each picture is wrapped with a separate figure element, each with a caption (visible when the mouse slides over the picture).
• The distribution of the images is entirely made using JavaScript, which makes it possible to process any number of images.
• The picture can be clicked to enlarge view.
• You can use the keyboard control: the z key to enlarge or reduce the picture, the C key can show or hide the title of the picture.

Browser compatible

• In the desktop and mobile Safari browsers, the transform-origin-z coordinates of the 3D gallery are replaced so that it advances.
• IE10 There will be an error if the Transform-style,3d Gallery display is not supported.
• As the number of pictures in the 3d gallery increases, the radius of the gallery increases with it.
• In the Premium edition we converted the CSS 3D Gallery to the jquery version of the 3D Gallery, making this effect compatible with previous versions of the browser.

via:http://www.w2bc.com/article/21750

A jquery-based and CSS3 cool 3D rotary Gallery Effect Plugin