<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
#box {
width: 140px;
height: 140px;
margin: 140px auto;
box-sizing: border-box;
position: relative;
transform-style: preserve-3d;
transform: perspective(8000px);
}
#box div {
width: 100%;
height: 100%;
position: absolute;
font-size: 70px;
line-height: 140px;
text-align: center;
border:1px solid #ccc;
}
/*前面*/
#box div:nth-child(1) {
background-position-x: 350px;
background-position-y: 150px;
background-image: url("./xuebitu.jpg");
transform: translateZ(70px);
}
/*后面*/
#box div:nth-child(2) {
background-position-x: 0;
background-position-y: 150px;
background-image: url("./xuebitu.jpg");
transform: translateZ(-70px);
}
/*左面*/
#box div:nth-child(3) {
background-position-x: 150px;
background-position-y: 150px;
background-image: url("./xuebitu.jpg");
transform: translateX(-70px) rotateY(90deg);
}
/*右面*/
#box div:nth-child(4) {
background-position-x: 150px;
background-position-y: 0;
background-image: url("./xuebitu.jpg");
transform: translateX(70px) rotateY(90deg);
}
/*上面*/
#box div:nth-child(5) {
background-position-x: 350px;
background-position-y: 0;
background-image: url("./xuebitu.jpg");
transform: translateY(-70px) rotateX(90deg);
}
/*下面*/
#box div:nth-child(6) {
background: paleturquoise;
transform: translateY(70px) rotateX(90deg);
background-image: url("./xuebitu.jpg");
}
</style>
</head>
<body>
<div id="box">
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
</div>
<script type="text/javascript">
// 获取元素
var oDiv = document.querySelector('#box');
var x = 30;
var y = -60;
oDiv.onmousedown = function (ev) {
var event = window.event || ev;
var disY = event.clientX - y;
var disX = event.clientY - x;
document.onmousemove = function (ev) {
var event = window.event || ev;
// 计算偏移角度
x = event.clientY - disX;
y = event.clientX - disY;
oDiv.style.transform = 'perspective(800px) rotateY(' + y + 'deg) rotateX(' + x + 'deg)'
}
document.onmouseup = function () {
document.onmousemove = null;
}
return false;
}
</script>
</body>
</html>
transform 写一个筛子
最新推荐文章于 2024-08-08 11:48:45 发布