Heim > Artikel > Web-Frontend > Realisieren Sie die 3D-Würfelrotation durch Ziehen mit der Maus basierend auf der neuen CSS3-Attributtransformation und nativem JS

Realisieren Sie die 3D-Würfelrotation durch Ziehen mit der Maus basierend auf der neuen CSS3-Attributtransformation und nativem JS

高洛峰Original: 2017-02-08 17:22:161546Durchsuche

Durch natives JS, Klickereignisse, Mausdrücken, Mausheben und Mausbewegungsereignisse wird das Ziehen und Drehen des 3D-Würfels realisiert und der Drehwinkel wird in Echtzeit auf der Benutzeroberfläche wiedergegeben.

Implementierungsprinzip: Durch Ermitteln der Koordinaten, wenn die Maus auf den Bildschirm klickt, und der Koordinaten, wenn sich die Maus bewegt, wird die von der Maus auf der X-Achse und der Y-Achse zurückgelegte Distanz ermittelt Der Abstand wird dem Transformationsattribut in Echtzeit zugewiesen

Um den Effekt der 3D-Würfelrotation durch Ändern des Transformationsattributwerts zu erzielen

HTML-Codeblock:

<body>
<input type="button" class="open" value="点击散开"/>
<input type="text" class="xNum" value=""/>//X轴旋转角度
<input type="text" class="yNum" value=""/>//Y轴旋转角度
<input type="text" class="zNum"/>
<div class="big_box">
<div class="box">
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
</div>
</div>
</body>

CSS-Codeblock:

<style>
body{cursor: url("img/openhand1.png"),auto;}
.big_box{
width: 500px;
height: 500px;
margin: 200px auto;
}
.box{
-webkit-transform-style: preserve-3d;
-moz-transform-style: preserve-3d;
-ms-transform-style: preserve-3d;
transform-style: preserve-3d;
transform-origin:100px 100px 00px;
position: relative;
transform: rotatex(0deg) rotatey(0deg) rotatez(0deg)scale3d(0.7,0.7,0.7);
}
.box span{
transition: all 1s linear;
}
span{
display: block;
position: absolute;
width: 200px;
height: 200px;
box-sizing: border-box;
border:1px solid #999;
/*opacity: 0.7;*/
text-align: center;
line-height: 200px;
font-size: 60px;
font-weight: 700;
border-radius: 12%;
}
.box span:nth-child(1){
background-color: deepskyblue;
transform-origin: left;
transform: rotatey(-90deg) translatex(-100px);//左
}
.box span:nth-child(2){
background-color: red;
transform-origin: right;
transform: rotatey(90deg) translatex(100px) ;//右
}
.box span:nth-child(3){
background-color: green;
transform-origin: top;
transform: rotatex(90deg) translatey(-100px) ;//上
}
.box span:nth-child(4){
background-color: #6633FF;
transform-origin: bottom;
transform: rotatex(-90deg) translatey(100px);//下
}
.box span:nth-child(5){
background-color: gold;
transform: translatez(-100px);//后
}
.box span:nth-child(6){
background-color: #122b40;
transform: translatez(100px);//前
}
.box:hover span{
opacity: 0.3;
}
.box:hover{
animation-play-state:paused;//设置动画暂停
}
</style>

JS-Codeblock:

<script>
move();
clickBox();
//鼠标按下且移动时触发，
function move(){
var body = document.querySelector("body");
var box = document.querySelector(".box");
var xNum =document.querySelector(".xNum");
var yNum =document.querySelector(".yNum");
var x = 0,y = 0,z = 0;
var xx = 0,yy = 0;
var xArr = [],yArr = [];
window.onmousedown = function (e) {//鼠标按下事件
body.style.cursor = &#39;url("img/closedhand1.png"),auto&#39;;
xArr[0] = e.clientX/2;//获取鼠标点击屏幕时的坐标
yArr[0] = e.clientY/2;
window.onmousemove = function (e) {//鼠标移动事件————当鼠标按下且移动时触发
xArr[1] = e.clientX/2;//获取鼠标移动时第一个点的坐标
yArr[1] = e.clientY/2;
yy += xArr[1] - xArr[0];//获得鼠标移动的距离
xx += yArr[1] - yArr[0];
xNum.value = xx+"°";//将所获得距离数字赋值给input显示旋转角度
yNum.value = yy+"°";
//将旋转角度写入transform中
box.style.transform = "rotatex("+xx+"deg) rotatey("+yy+"deg) rotatez(0deg)scale3d(0.7,0.7,0.7)";
xArr[0] = e.clientX/2;
yArr[0] = e.clientY/2;
}
};
window.onmouseup = function () {//鼠标抬起事件————用于清除鼠标移动事件，
body.style.cursor = &#39;url("img/openhand1.png"),auto&#39;;
window.onmousemove = null;
}
}
//点击事件、负责立方体盒子的六面伸展
function clickBox(){
var btn = document.querySelector(".open");
var box = document.querySelector(".box");
var son = box.children;
var value = 0;
//存储立方体散开时的transform参数
var arr0 = ["rotatey(-90deg) translatex(-100px)","rotatey(90deg) translatex(100px)","rotatex(90deg) translatey(-100px)",<br>"rotatex(-90deg) translatey(100px)","translatez(-100px)","translatez(100px)"];
//存储立方体合并时的transform参数
var arr1 = ["rotatey(-90deg) translatex(-100px)translatez(100px)","rotatey(90deg) translatex(100px)translatez(100px)",<br>"rotatex(90deg) translatey(-100px)translatez(100px)","rotatex(-90deg) translatey(100px)translatez(100px)","translatez(-200px)","translatez(200px)"];
btn.onclick = function(){
if(value == 0){
value = 1;
btn.value = "点击合并";
for(var i=0;i<arr1.length;i++){
son[i].style.transform = arr1[i];
console.log(son[i])
}
}else if(value == 1){
value = 0;
btn.value = "点击散开";
for(var j=0;j<arr0.length;j++){
son[j].style.transform = arr0[j];
console.log(j);
}
}
};
}
</script>

Das Obige ist das Wissen, das Ihnen der Editor basierend auf dem neuen CSS3 vorstellt Attributtransformation und native JS, um die 3D-Würfelrotation durch Mausziehen zu realisieren. Wenn Sie Fragen haben, hinterlassen Sie mir bitte eine Nachricht. Ich möchte mich auch bei Ihnen allen für Ihre Unterstützung der chinesischen PHP-Website bedanken!

Weitere verwandte Artikel, die auf der neuen CSS3-Attributtransformation und nativen JS basieren, um die 3D-Würfelrotation durch Ziehen mit der Maus zu realisieren, finden Sie auf der chinesischen PHP-Website!

Stellungnahme：

Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn

Vorheriger Artikel：CSS passt die Größe von Bildern an, Sie müssen Breite und Höhe kennenNächster Artikel：CSS passt die Größe von Bildern an, Sie müssen Breite und Höhe kennen

In Verbindung stehende Artikel

Mehr sehen