<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="black">
<meta name="format-detection" content="telephone=no;address=no;email=no">
<title></title>
<style>
#div_1{
-webkit-perspective: 72;
}
#div_1_1{
transform: rotateX(42deg);
}
#div_1_1 ::selection{
background:none;
}
.div_class1{
width: 600px;
height: 300px;
border: 1px black solid;
border-radius: 20px;
background: cornsilk;
}
.div_class1_1{
width: 200px;
height: 190px;
border: 1px rgb(69, 63, 53) solid;
border-radius: 20px;
position: relative;
top: 50px;
background: #0087ff;
z-index: 999;
margin: 0px auto;
text-align: center;
vertical-align: middle;
line-height: 50px;
}
.div_a{
cursor: pointer;
}
#div_2_1{
/*transform: perspective(500px) translateZ(-60px);*/
transition: transform 3s,background 3s,width 3s,height 3s;
}
#div_2_1:hover{
width: 300px;
height: 260px;
background: red;
-moz-transform: rotate(360deg);
-webkit-transform: rotate(360deg);
-o-transform: rotate(360deg);
transform: rotate(360deg);
}
details{
cursor: pointer;
}
.cubec{
perspective: 1000px;
/*background-color: skyblue;*/
display: inline-block;
width: 250px;
height : 250px;
margin-top: 50px;
}
.mainc{
width: 100%;
height: 100%;
display: inline-block;
transition: all 0.85s cubic-bezier(0.175, 0.885, 0.32, 1.275);
text-align: center;
position: relative;
transform-style: preserve-3d;
transform: rotateX(-25deg) rotateY(25deg);
}
.mainc div{
width: 100%;
height: 100%;
border: 1px solid #888;
background: #FFF;
color: #333;
line-height: 250px;
opacity: 0.8;
}
.cover_1{
overflow: hidden;
position: absolute;
box-shadow: inset 0 0 60px rgba(0, 0, 0, 0.1), 0 0 50px rgba(0, 0, 0, 0.3);
transform: translate3d(0, 0, 125px);
}
.cover_1_top{
overflow: hidden;
position: absolute;
box-shadow: inset 0 0 60px rgba(0, 0, 0, 0.1), 0 0 50px rgba(0, 0, 0, 0.3);
transform: rotateX(90deg) translate3d(0px,0px,125px);
}
.cover_1_bottom{
overflow: hidden;
position: absolute;
box-shadow: inset 0 0 60px rgba(0, 0, 0, 0.1), 0 0 50px rgba(0, 0, 0, 0.3);
transform: rotateX(90deg) rotateY(0deg) translate3d(0px,0px,-125px);
}
.cover_1_right{
overflow: hidden;
position: absolute;
box-shadow: inset 0 0 60px rgba(0, 0, 0, 0.1), 0 0 50px rgba(0, 0, 0, 0.3);
transform: rotateX(90deg) rotateY(90deg) translate3d(0px,0px,125px);
}
.cover_1_left{
overflow: hidden;
position: absolute;
box-shadow: inset 0 0 60px rgba(0, 0, 0, 0.1), 0 0 50px rgba(0, 0, 0, 0.3);
transform: rotateX(90deg) rotateY(90deg) translate3d(0px,0px,-125px);
}
.cover_1_hou{
overflow: hidden;
position: absolute;
box-shadow: inset 0 0 60px rgba(0, 0, 0, 0.1), 0 0 50px rgba(0, 0, 0, 0.3);
transform: rotateX(0deg) rotateY(0deg) translate3d(0px,0px,-125px);
}
</style>
</head>
<body>
<div class="div_a" onclick="">效果测试1</div>
<div id="div_1" style="" class="div_class1">
<div id="div_1_1" class="div_class1_1">
测试内容
</div>
</div>
<div class="div_a" onclick="">效果测试2</div>
<div id="div_2" style="" class="div_class1">
<div id="div_2_1" class="div_class1_1" style="">
可用作放大缩小旋转的动漫
</div>
</div>
<details open="open">
<summary>效果测试3</summary>
<div>
正方体
<div class="cubec">
<div class="mainc" id="mainc">
<div class="cover_1">
</div>
<div class="cover_1_top">
</div>
<div class="cover_1_bottom">
</div>
<div class="cover_1_left">
</div>
<div class="cover_1_right">
</div>
<div class="cover_1_hou">
</div>
</div>
</div>
</div>
</details>
</body>
</html>
<script>
// 初始化
document.getElementById('mainc').style.transform = "rotateX(-25deg) rotateY(25deg)";
var a;
var cx = -25; // 初始x
var cy = 25; // 初始y
var dx; // 点击下时的位置
var dy; // 点击下时的位置
document.onmouseup = function () {
if (!a)return;
document.all ? a.releaseCapture() : window.captureEvents(Event.MOUSEMOVE | Event.MOUSEUP);
a = "";
};
document.onmousemove = function (d) {
if (!a)return;
if (!d)d = event;
var tx = d.clientX - dx;
var ty = d.clientY - dy;
var wx = tx/20 + cx;
var wy = ty/20 + cy;
document.getElementById('mainc').style.transform = "rotateX("+wx+"deg) rotateY("+wy+"deg)";
console.log(wx);
};
document.onmousedown = function(e){
document.all ? a.setCapture() : window.captureEvents(Event.MOUSEMOVE);
dx = e.clientX;
dy = e.clientY;
a = 2;
}
// document.getElementById('mainc').style.transform = "rotateX(-35deg) rotateY(35deg)";
// alert(document.getElementById('mainc').style.transform);
</script>
浙公网安备 33010602011771号