溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務(wù)條款》
您好，登錄后才能下訂單哦！
這篇文章將為大家詳細(xì)講解有關(guān)css3 transform及原生js實現(xiàn)鼠標(biāo)拖動3D立方體旋轉(zhuǎn)的示例分析，小編覺得挺實用的，因此分享給大家做個參考，希望大家閱讀完這篇文章后可以有所收獲。
1、能夠嵌入動態(tài)文本于HTML頁面。2、對瀏覽器事件做出響應(yīng)。3、讀寫HTML元素。4、在數(shù)據(jù)被提交到服務(wù)器之前驗證數(shù)據(jù)。5、檢測訪客的瀏覽器信息。6、控制cookies，包括創(chuàng)建和修改等。7、基于Node.js技術(shù)進行服務(wù)器端編程。
本文通過原生JS，點擊事件，鼠標(biāo)按下、鼠標(biāo)抬起和鼠標(biāo)移動事件，實現(xiàn)3D立方體的拖動旋轉(zhuǎn)，并將旋轉(zhuǎn)角度實時的反應(yīng)至界面上顯示。
實現(xiàn)原理：通過獲取鼠標(biāo)點擊屏幕時的坐標(biāo)和鼠標(biāo)移動時的坐標(biāo)，來獲得鼠標(biāo)在X軸、Y軸移動的距離，將距離實時賦值給transform屬性。
從而通過改變transform：rotate屬性值來達(dá)到3D立方體旋轉(zhuǎn)的效果：
HTML代碼塊：
XML/HTML Code復(fù)制內(nèi)容到剪貼板
<body> <input type="button" class="open" value="點擊散開"/> <input type="text" class="xNum" value="0"/>//X軸旋轉(zhuǎn)角度 <input type="text" class="yNum" value="0"/>//Y軸旋轉(zhuǎn)角度 <input type="text" class="zNum"/> <div class="big_box"> <div class="box"> <span>1</span> <span>2</span> <span>3</span> <span>4</span> <span>5</span> <span>6</span> </div> </div> </body>
CSS代碼塊：
CSS Code復(fù)制內(nèi)容到剪貼板
<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: rightright;
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: bottombottom;
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;//設(shè)置動畫暫停
}
</style>JS代碼塊：
JavaScript Code復(fù)制內(nèi)容到剪貼板
<script>
move();
clickBox();
//鼠標(biāo)按下且移動時觸發(fā)，
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) {//鼠標(biāo)按下事件
body.style.cursor = 'url("img/closedhand1.png"),auto';
xArr[0] = e.clientX/2;//獲取鼠標(biāo)點擊屏幕時的坐標(biāo)
yArr[0] = e.clientY/2;
window.onmousemove = function (e) {//鼠標(biāo)移動事件————當(dāng)鼠標(biāo)按下且移動時觸發(fā)
xArr[1] = e.clientX/2;//獲取鼠標(biāo)移動時第一個點的坐標(biāo)
yArr[1] = e.clientY/2;
yy += xArr[1] - xArr[0];//獲得鼠標(biāo)移動的距離
xx += yArr[1] - yArr[0];
xNum.value = xx+"°";//將所獲得距離數(shù)字賦值給input顯示旋轉(zhuǎn)角度
yNum.value = yy+"°";
//將旋轉(zhuǎn)角度寫入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 () {//鼠標(biāo)抬起事件————用于清除鼠標(biāo)移動事件，
body.style.cursor = 'url("img/openhand1.png"),auto';
window.onmousemove = null;
}
}
//點擊事件、負(fù)責(zé)立方體盒子的六面伸展
function clickBox(){
var btn = document.querySelector(".open");
var box = document.querySelector(".box");
var son = box.children;
var value = 0;
//存儲立方體散開時的transform參數(shù)
var arr0 = ["rotatey(-90deg) translatex(-100px)","rotatey(90deg) translatex(100px)","rotatex(90deg) translatey(-100px)",<br>"rotatex(-90deg) translatey(100px)","translatez(-100px)","translatez(100px)"];
//存儲立方體合并時的transform參數(shù)
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>關(guān)于“css3 transform及原生js實現(xiàn)鼠標(biāo)拖動3D立方體旋轉(zhuǎn)的示例分析”這篇文章就分享到這里了，希望以上內(nèi)容可以對大家有一定的幫助，使各位可以學(xué)到更多知識，如果覺得文章不錯，請把它分享出去讓更多的人看到。
免責(zé)聲明：本站發(fā)布的內(nèi)容（圖片、視頻和文字）以原創(chuàng)、轉(zhuǎn)載和分享為主，文章觀點不代表本網(wǎng)站立場，如果涉及侵權(quán)請聯(lián)系站長郵箱：is@yisu.com進行舉報，并提供相關(guān)證據(jù)，一經(jīng)查實，將立刻刪除涉嫌侵權(quán)內(nèi)容。
億速云公眾號
手機網(wǎng)站二維碼