html轮转效果,jquery 3d旋转轮播图效果

这是一款简单的jquery 3d旋转轮播图效果。该轮播图基于bootstrap网格系统，通过jquery和CSS3 transforms来制作3D旋转效果，非常炫酷。

使用方法

在页面中引入bootstrap.min.css，style.css和jquery文件。

HTML结构

该轮播图的HTML结构如下：

A bootstrap compatible slider that rotates gracefully in three dimensions

A bootstrap compatible slider that rotates gracefully in three dimensions

A bootstrap compatible slider that rotates gracefully in three dimensions

5

6

Previous

Next

JavaScript

在页面DOM元素加载完毕之后，通过下面的js代码来完成该轮播图的初始化。

var counter = 0;

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

counter -= 90;

var rotation = 'translateZ( -50vw ) rotateY( ' + counter + 'deg )';

$('#cube').css('transform', rotation);

});

$('.previous').on('click', function(){

counter += 90;

var rotation = 'translateZ( -50vw ) rotateY( ' + counter + 'deg )';

$('#cube').css('transform', rotation);

});