当前位置：前端开发者 > JavaScript > 正文

前端开发原生JS和CSS3实现3D旋转效果

2018-11-30 21:16:37 分类：JavaScript 阅读(127) 评论(0)

前端开发新手软件

软件开发前端教学视频教程

前端开发软件介绍说明

html 代码

<head>

<meta charset=”utf-8″ />

<title></title>

<style type=”text/css”>

* {

padding: 0;

margin: 0;

}

body {

background: black;

padding-top: 140px;

}

#wrap {

-webkit-perspective: 1000px;

/* 设置视距*/

}

#photos {

-webkit-user-select: none;

width: 120px;

height: 180px;

/*border: 1px solid #ccc;*/

margin: 0 auto;

transform-style: preserve-3d;

/*设置3d环境*/

}

#photos img {

width: 100%;

height: 100%;

position: absolute;

box-shadow: 0 0 8px #eaeaea;

box-shadow: 1px -1px 6px #666;

border-radius: 4px;

-webkit-box-reflect: below 3px -webkit-linear-gradient(top, rgba(

0,

0,

0,

0

)

40%, rgba(0, 0, 0, 0.5));

/*设置倒影*/

cursor: pointer;

}

#photos div {

/*底部圆盘*/

width: 1200px;

height: 1200px;

border-radius: 50%;

position: absolute;

top: 102%;

left: 50%;

margin-left: -600px;

margin-top: -600px;

transform: rotateX(90deg);

background: -webkit-radial-gradient(

center center,

600px 600px,

rgba(158, 158, 222, 0.5),

rgba(0, 0, 0, 0)

);

}

button {

/*margin-top: -300px;*/

}

</style>

</head>

<body>

<div id=”wrap”>

<div id=”photos”>

<img

src=”https://www.rokub.com/wp-content/uploads/2018/11/321-320×320.jpg”

/>

<img

src=”https://www.rokub.com/wp-content/uploads/2018/11/321-320×320.jpg”

/>

<img

src=”https://www.rokub.com/wp-content/uploads/2018/11/321-320×320.jpg”

/>

<img

src=”https://www.rokub.com/wp-content/uploads/2018/11/321-320×320.jpg”

/>

<img

src=”https://www.rokub.com/wp-content/uploads/2018/11/321-320×320.jpg”

/>

<img

src=”https://www.rokub.com/wp-content/uploads/2018/11/321-320×320.jpg”

/>

<img

src=”https://www.rokub.com/wp-content/uploads/2018/11/331-980×450.jpg”

/>

<img

src=”https://www.rokub.com/wp-content/uploads/2018/11/331-980×450.jpg”

/>

<img

src=”https://www.rokub.com/wp-content/uploads/2018/11/331-980×450.jpg”

/>

<img

src=”https://www.rokub.com/wp-content/uploads/2018/11/331-980×450.jpg”

/>

<img

src=”https://www.rokub.com/wp-content/uploads/2018/11/331-980×450.jpg”

/>

<img

src=”https://www.rokub.com/wp-content/uploads/2018/11/331-980×450.jpg”

/>

<img

src=”https://www.rokub.com/wp-content/uploads/2018/11/331-980×450.jpg”

/>

<img

src=”https://www.rokub.com/wp-content/uploads/2018/11/331-980×450.jpg”

/>

<div></div>

</div>

</div>

<script type=”text/javascript”>

var photosDom = document.getElementById(‘photos’); //获取图片数组

var images = photosDom.getElementsByTagName(‘img’); //获取图片数量

var len = images.length;

//计算每张图片按Y轴旋转的角度

var deg = 360 / len;

var startY = -8;

var startX = 0;

var j = 0;

var i = len;

var create = setInterval(function () {

var a = setInterval(function () {

j += 9;

// console.log(j)

images[i].style = ‘transform : rotateY(‘ + deg * i + ‘deg) translateZ(‘ + j + ‘px)’; //先旋转后推动

if (j == 360) {

j = 0;

images[i].setAttribute(‘ondragstart’, ‘return false’);

clearInterval(a);

}

}, 10) < br />

i–;

if (i == -1) {

clearInterval(create);

clearInterval(a);

return;

}

}, 500)

function rotate() {

photosDom.style.transform = “rotateX(” + startY + “deg) rotateY(” + (startX++) + “deg)”;

}

var timer = setInterval(rotate, 30);

document.onmousedown = function(e1) {

clearInterval(timer);

var downX = e1.clientX;

var downY = e1.clientY;

document.onmousemove = function(e2) {

startX = (e2.clientX – downX) * 0.2 + startX;

startY = -(e2.clientY – downY) * 0.1 + startY;

photosDom.style.transform = “rotateX(” + startY + “deg) rotateY(” + startX + “deg)”;

downX = e2.clientX;

downY = e2.clientY;

}

}

document.onmouseup = function() {

timer = setInterval(rotate, 30);

document.onmousemove = null;

}

</script>

</body>

</html>

深圳软件前端开发培训

前端用的开发软件下载

mac下前端开发软件

» 本文来自：前端开发者 » 《前端开发原生JS和CSS3实现3D旋转效果》

» 本文链接地址：https://www.rokub.com/6884.html

» 您也可以订阅本站：https://www.rokub.com

标签：前端开发者

前端开发者

相关推荐

评论抢沙发

评论前必须登录！

立即登录注册

回顶
回顶部