3d图片翻转

Html

Css

body {
	background:#000;
}
* {
	margin:0px;
}
/*wrap start*/
#wrap {
	width:120px;
	height:180px;
	margin:50px auto;
	position:relative;
	transform-style:preserve-3D;
	/*变幻风格为3D*/
				/*perspective:800px;
	景深*/
				transform:perspective(800px) rotateX(-12deg);
}
#wrap img {
	position:absolute;
	top:0;
	left:0;
	transform:rotateY(32deg);
	box-shadow:0px 0px 20px #fff;
	/*盒阴影 下方 距离7px . 渐变*/
				-webkit-box-reflect:below 7px
				-webkit-linear-gradient(top,rgba(0,0,0,0)50%,rgba(0,0,0,1));
	/*倒影*/
				-moz-box-reflect:below 7px
				-moz-linear-gradient(top,rgba(0,0,0,0)50%,rgba(0,0,0,1));
}
/*end wrap*/

$(function() {
    var Deg = 360 / $("#wrap img").size(); //获得角度
    var roY = 0;
    var roX = -12;
    $("#wrap img").each(function(i) { //遍历

$(this).css({
            "transform": "rotateY(" + Deg * i + "deg)translateZ(350px)"
        }).attr("ondragstart", "return false"); //attr 添加标签样式
    });

//判断鼠标事件
    $(document).mousedown(function(ev) { //鼠标按下

var x_pre = ev.clientX; //获得之前鼠标X坐标
        var y_pre = ev.clientY; //获得之前鼠标X坐标

$(this).bind("mousemove", function(ev) { //鼠标移动 bind为绑定

var x = ev.clientX; //获得当前鼠标X坐标
            var y = ev.clientY; //获得当前鼠标Y坐标
            var xN = x - x_pre; //差值
            var yN = y - y_pre; //差值

roY += xN * 0.2;
            roX -= yN * 0.2;

$("#wrap").css({
                "transform": "perspective(800px)rotateY(" + roY + "deg)rotateX(" + roX + "deg)"
            });
            x_pre = ev.clientX; //获得之前鼠标X坐标
            y_pre = ev.clientY; //获得之前鼠标X坐标
        });

}).mouseup(function() { //鼠标抬起
        console.log("抬起")
        $(this).unbind("mousemove"); //解除绑定
    });
});

↑上面代码改变，会自动显示代码结果 jQuery调用版本：1.11.3

立即下载

3d图片翻转



代码描述：使用transfm和js实现图片3d翻转

0

最新

发表评论全部评论

暂时没有评论！

登录后才可以评论

30秒后在评论吧!

PROMULGATOR

哦

相关代码

3d图片翻转

最新