3D图片爆炸效果展示

Html

Css

点击图片

* {
	margin:0;
	padding:0;
	list-style:none;
}
#box {
	width:700px;
	height:400px;
	margin:50px auto;
	transform-style:preserve-3d;
	position:relative;
	background:url(http://www.jq22.com/img/cs/500x300-2.png) no-repeat;
	perspective:800px;
}
#box span {
	position:absolute;
	background:url(http://www.jq22.com/img/cs/500x300-1.png) no-repeat;
}

function rnd(n, m) {
    return parseInt(Math.random() * (m - n) + n);
}
window.onload = function() {
    var oBox = document.getElementById('box');

var R = 4;
    var C = 7;
    for (var r = 0; r < R; r++) {
        for (var c = 0; c < C; c++) {
            var oSpan = document.createElement('span');
            oSpan.style.width = oBox.offsetWidth / C + 'px';
            oSpan.style.height = oBox.offsetHeight / R + 'px';
            oBox.appendChild(oSpan);
            oSpan.style.left = c * oSpan.offsetWidth + 'px';
            oSpan.style.top = r * oSpan.offsetHeight + 'px';
            oSpan.style.backgroundPosition = '-' + c * oSpan.offsetWidth + 'px -' + r * oSpan.offsetHeight + 'px';
        }
    }

var iNow = 0;

oBox.onclick = function() {
        var aSpan = oBox.children;

iNow++;

for (var i = 0; i < aSpan.length; i++) {
            aSpan[i].style.transition = '1s all ease';

var x = (aSpan[i].offsetLeft + aSpan[i].offsetWidth / 2) - oBox.offsetWidth / 2;
            var y = (aSpan[i].offsetTop + aSpan[i].offsetHeight / 2) - oBox.offsetHeight / 2;

//aSpan[i].style.transform='translateX('+x+'px) translateY('+y+'px) translateZ(100px)';
            aSpan[i].style.transform = 'translate3d(' + x + 'px,' + y + 'px,100px) rotateX(' + rnd(0, 180) + 'deg) rotateY(' + rnd(0, 180) + 'deg)';
            aSpan[i].style.opacity = 0;

;
            (function(oSpan) {
                aSpan[i].addEventListener('transitionend', function() {
                    oSpan.style.transition = 'none';

oSpan.style.transform = 'translate3d(0,0,0) rotateX(0deg) rotateY(0deg)';

oSpan.style.opacity = 1;
                    oSpan.style.backgroundImage = 'url(http://www.jq22.com/img/cs/500x300-' + ((iNow % 3) + 1) + '.png)';
                    oBox.style.backgroundImage = 'url(http://www.jq22.com/img/cs/500x300-' + ((iNow + 1) % 3 + 1) + '.png)';
                }, false);
            })(aSpan[i]);
        }
    };
};

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

立即下载

3D图片爆炸效果展示



代码描述：使用原生JS与CSS3实现爆炸效果

0

最新

发表评论全部评论

暂时没有评论！

登录后才可以评论

30秒后在评论吧!

PROMULGATOR

幽然~~窳纛?

相关代码

3D图片爆炸效果展示

最新