为什么js中rotate只执行一次
突然想起之前学rotate时写的3d魔方，写的a:hover让它旋转的，但换成js的时候，加了定时器却发现rotate只能旋转一次，没办法达到一直旋转的效果，查了资料也还不是很明白。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
body {
perspective: 800px;
}
.box {
position: relative;
margin: 200px auto;
width: 200px;
height: 200px;
transform-style: preserve-3d;
transition: all 1s linear;
animation: rotate 1s linear infinite;
}
/* @keyframes rotate {
100% {
transform: rotate3d(1, 1, 1, 360deg);
}
} */
.front,
.back,
.left,
.right,
.top,
.bottom {
position: absolute;
width: 100%;
height: 100%;
}
.front {
background-color: rebeccapurple;
transform: translateZ(100px);
}
.back {
background-color: skyblue;
transform: translateZ(-100px) rotateX(180deg);
}
.bottom {
background-color: greenyellow;
transform: translateY(100px) rotateX(-90deg);
}
.top {
background-color: coral;
transform: translateY(-100px) rotateX(90deg);
}
.left {
background-color: pink;
transform: translateX(-100px) rotateY(-90deg);
}
.right {
background-color: yellow;
transform: translateX(100px) rotateY(90deg);
}
/* .box:hover {
transform: rotate3d(1, 1, 1, 360deg)
} */
</style>
</head>
<body>
<div class="box">
<div class="front"></div>
<div class="back"></div>
<div class="top"></div>
<div class="bottom"></div>
<div class="left"></div>
<div class="right"></div>
</div>
<script>
var box = document.querySelector('.box');
var timer = setInterval(function () {
box.click();
}, 1200);
box.addEventListener('click', function () {
this.style.transform = "rotate3d(1, 1, 1, 360deg)";
});
</script>
</body>
</html>
transition:过度动画需要有属性变化才行
你第一次设置属性 this.style.transform = "rotate3d(1, 1, 1, 360deg)"; 可以有动画
但第二次设置属性 this.style.transform = "rotate3d(1, 1, 1, 360deg)"; 时这个属性之前已经是rotate3d(1, 1, 1, 360deg)了,等于没有属性变化,就不会有过度动画
你需要让transform 属性交替的 "rotate3d(1, 1, 1, 360deg)"和"rotate3d(1, 1, 1, 0deg)"变化
你题目的解答代码如下：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
body {
perspective: 800px;
}
.box {
position: relative;
margin: 200px auto;
width: 200px;
height: 200px;
transform-style: preserve-3d;
transition: all 1s linear;
animation: rotate 1s linear infinite;
}
/* @keyframes rotate {
100% {
transform: rotate3d(1, 1, 1, 360deg);
}
} */
.front,
.back,
.left,
.right,
.top,
.bottom {
position: absolute;
width: 100%;
height: 100%;
}
.front {
background-color: rebeccapurple;
transform: translateZ(100px);
}
.back {
background-color: skyblue;
transform: translateZ(-100px) rotateX(180deg);
}
.bottom {
background-color: greenyellow;
transform: translateY(100px) rotateX(-90deg);
}
.top {
background-color: coral;
transform: translateY(-100px) rotateX(90deg);
}
.left {
background-color: pink;
transform: translateX(-100px) rotateY(-90deg);
}
.right {
background-color: yellow;
transform: translateX(100px) rotateY(90deg);
}
/* .box:hover {
transform: rotate3d(1, 1, 1, 360deg)
} */
</style>
</head>
<body>
<div class="box">
<div class="front"></div>
<div class="back"></div>
<div class="top"></div>
<div class="bottom"></div>
<div class="left"></div>
<div class="right"></div>
</div>
<script>
var box = document.querySelector('.box');
var timer = setInterval(function () {
box.click();
}, 1200);
var f = true;
box.addEventListener('click', function () {
if (f) {
this.style.transform = "rotate3d(1, 1, 1, 360deg)";
} else {
this.style.transform = "rotate3d(1, 1, 1, 0deg)";
}
f = !f;
});
</script>
</body>
</html>
您好，我是有问必答小助手，您的问题已经有小伙伴帮您解答，感谢您对有问必答的支持与关注！如有帮助，请点击我的回答下方的【采纳该答案】按钮帮忙采纳下，谢谢!
PS：问答VIP年卡 【限时加赠：IT技术图书免费领】，了解详情>>> https://vip.csdn.net/askvip?utm_source=1146287632