前端开发原生JS和CSS3实现3D旋转效果
摘要： 前端开发新手 软件 软件开发前端教学视频教程 前端开发软件介绍说明 html 代码 <html> <head> <meta charset=”utf-8″ /> <title></tit……
| 前端开发新手 软件 |
| 软件开发前端教学视频教程 |
| 前端开发软件介绍说明 |
html 代码
<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
近期评论