当前位置 CSS模版园 >> 酷炫特效 >> 图片特效-3D旋转木马

图片特效-3D旋转木马

图片特效-3D旋转木马

采用jquery框架和css3

CSS

.ctn {
	width: 100px;
	height: 150px;
	margin: 100px auto;
	position: relative;
	-webkit-transform-style: preserve-3d;
	-moz-transform-style: preserve-3d;
	-ms-transform-style: preserve-3d;
	-o-transform-style: preserve-3d;
	transform-style: preserve-3d;
	/*图片倾斜度*/
    -webkit-transform: perspective(800px) rotateX(-10deg);
	-moz-transform: perspective(800px) rotateX(-10deg);
	-ms-transform: perspective(800px) rotateX(-10deg);
	-o-transform: perspective(800px) rotateX(-10deg);
	transform: perspective(800px) rotateX(-10deg);
}
.ctn ul li {
	width: 100px;
	height: 150px;
	outline: 1px solid rgba(0, 0, 10, .2);
	-webkit-box-shadow: 0 0 5px #fff;
	-ms-box-shadow: 0 0 5px #fff;
	box-shadow: 0 0 5px #fff;
	position: absolute;
	/*倒影*/
    -webkit-box-reflect: below 10px -webkit-linear-gradient(top, rgba(0, 0, 0, 0) 30%, rgba(0, 0, 0, 0.1) 60%, rgba(0, 0, 0, .3) 100%);
}
.ctn .mask {
	width: 600px;
	height: 600px;
	background: #fff;
	-ms-border-radius: 600px;
	border-radius: 600px;
	-webkit-transform: rotateX(90deg) translateZ(45px);
	-moz-transform: rotateX(90deg) translateZ(45px);
	-ms-transform: rotateX(90deg) translateZ(45px);
	-o-transform: rotateX(90deg) translateZ(45px);
	transform: rotateX(90deg) translateZ(45px);
	position: absolute;
	top: -100px;
	left: -250px;
	background: -webkit-radial-gradient(center, rgba(255, 255, 255, .3), rgba(255, 255, 255, .1), rgba(255, 255, 255, 0));
}

html

<div class="ctn">
  <ul>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
  </ul>
  <p class="mask"></p>
</div>

JS:

$(document)[0].onselectstart = function () {
	return false;
}
//添加图片
var L = $("li").size();
$("li").each(function (i) {
	$(this).css({ "transition": "transform " + ((L - i) * .3) + "s", "background": "url(http://www.cssteach.com/uploadfile/2016/0305/20160305114807748.png)", "transform": "rotateY(" + i * 36 + "deg) translateZ(300px)", "background-size": "100%" });
});
//
var diffX, x = 0, diffY, y = -15, p = null;
$(document).mousedown(function (e) {
	clearInterval(p);
	var xBe = e.clientX;
	var yBe = e.clientY;
	$(this).bind("mousemove", function (e) {
		//console.log(1);
		var xNo = e.clientX;
		diffX = xNo - xBe;
		xBe = e.clientX;
		x += diffX * .5;
		//
		var yNo = e.clientY;
		diffY = yNo - yBe;
		yBe = e.clientY;
		y -= diffY * .3;
		$(".ctn").css({ "transform": "perspective(800px) rotateX(" + y + "deg) rotateY(" + x + "deg) " });

	});
});
//
$(document).mouseup(function () {
	$(this).unbind("mousemove");
	var p = setInterval(function () {
		diffX *= .95;
		diffY *= .95;
		x += diffX * .2;
		y -= diffY * .2;
		$(".ctn").css({ "transform": "perspective(800px) rotateX(" + y + "deg) rotateY(" + x + "deg) " });
		if (Math.abs(diffX) < .5 && Math.abs(diffY) < .5) {
			clearInterval(p);
		}
	}, 30);
});


声明本站所有资源仅供学习与参考,请勿用于商业用途。转载请注明来自:cssteach.com

原文http://cssteach.com/html/show-13-57.html

推荐模版

热门网站模版

猜您喜欢

热门网站模版

热门网站模版

评论

若文章内容有错误或无法下载,请在回复中说明(可无需登录,直接评论)