JQuery在悬停(3D)时前后旋转两个边
JQuery rotate two side back forth on hover (3D)
我有两个正面和背面。默认情况下显示正面,当我将鼠标悬停在它上面时,它显示背面(即另一边)。问题是,它返回到前面自己,我想做的是,除非我悬停在它上面,我希望背面保持原样。(悬停时旋转堡垒)
下面是一个实例:
$(document).ready(function(){
$(".cube").mouseover(function(){
$(".cube").addClass('spin-cube');
});
$(".cube").mouseout(function(){
$(".cube").removeClass('spin-cube');
});
});
.wrap {
width: 100%;
height: 300px;
padding-top:50px;
clear: both;
perspective: 800px;
perspective-origin: 50% 100px;
}
.cube {
position: relative;
width: 200px;
transform-style: preserve-3d;
margin: 0 auto;
}
.cube div {
position: absolute;
width: 200px;
height: 200px;
}
.left {
background-color: #FFC250;
transform: rotateY(270deg) translateX(-100px);
transform-origin: center left;
}
.front {
background-color: #360;
z-index: 1000;
transform: translateZ(100px);
}
@keyframes spin {
from { transform: rotateY(0); }
to { transform: rotateY(90deg); }
}
.spin-cube {
animation: spin 2s linear;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="wrap">
<div class="cube">
<div class="front">front</div>
<div class="left">left</div>
</div>
</div>
这就解决了问题
$(".cube").mouseover(function(){
if($(".cube").hasClass("spin-cube-front")){
$(".cube").addClass('spin-cube-back');
$(".cube").removeClass('spin-cube-front');
}else{
$(".cube").removeClass('spin-cube-back');
$(".cube").addClass('spin-cube-front');
}
});
$(document).ready(function(){
$(".cube").mouseover(function(){
$(".cube").addClass('spin-cube');
});
$(".cube").mouseout(function(){
$(".cube").removeClass('spin-cube');
});
});
.wrap {
width: 100%;
height: 300px;
padding-top:50px;
clear: both;
perspective: 800px;
perspective-origin: 50% 100px;
}
.cube {
position: relative;
width: 200px;
transform-style: preserve-3d;
margin: 0 auto;
transition: transform 1s ease;
}
.cube div {
position: absolute;
width: 200px;
height: 200px;
}
.left {
background-color: #FFC250;
transform: rotateY(270deg) translateX(-100px);
transform-origin: center left;
}
.front {
background-color: #360;
z-index: 1000;
transform: translateZ(100px);
}
.spin-cube {
transform: rotateY(90deg);
}
使用过渡而不是动画更容易做到这一点。下面是一个例子:
$(document).ready(function(){
var isClassy = false;
var cooldown = false;
$(".cube").mouseover(function(){
if (cooldown) return;
if (!isClassy) {
$(".cube").addClass('spin-cube');
isClassy = true;
} else {
$(".cube").removeClass('spin-cube');
isClassy = false;
}
cooldown = true;
setTimeout(function() {cooldown = false;}, 500);
});
});
.wrap {
width: 100%;
height: 300px;
padding-top:50px;
clear: both;
perspective: 800px;
perspective-origin: 50% 100px;
}
.cube {
position: relative;
width: 200px;
transform-style: preserve-3d;
margin: 0 auto;
transition: all 1s ease;
transform: rotateY(0deg);
}
.cube div {
position: absolute;
width: 200px;
height: 200px;
}
.left {
background-color: #FFC250;
transform: rotateY(270deg) translateX(-100px);
transform-origin: center left;
}
.front {
background-color: #360;
z-index: 1000;
transform: translateZ(100px);
}
.spin-cube {
transform: rotateY(90deg);
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="wrap">
<div class="cube">
<div class="front">front</div>
<div class="left">left</div>
</div>
</div>
相关文章:
- 用两个手指旋转谷歌地图javascript中的地图
- 选择最短的旋转来排列两个图像
- 使用关键帧图像旋转器时,图像不会在两个块之间同步协调
- 围绕其中心旋转两个画布
- 在图像后面旋转两个图像
- 为什么两个潜水器都不旋转
- 在两个轴上旋转THREE.js中的三维矢量
- 如何在画布中同时旋转两个矩形
- 如何在同一时间和同一鼠标事件上旋转两个不同的X3D场景
- 如何在两个方向上旋转图像90
- 如何在同一页面中使用两个不同版本的猫头鹰旋转木马
- 两个在圆圈内旋转的箭头
- 猫头鹰旋转木马,一次滚动两个项目
- jQuery文本旋转/填充适用于单个单词,但不适用于两个单词
- 在相反的方向上旋转两个图像
- 在一个页面上显示两个旋转木马
- 计算两个旋转矩形/多边形的碰撞和相交面积
- JQuery在悬停(3D)时前后旋转两个边
- 基本的li旋转器显示两个而不是一个
- 我如何旋转两个图像[在同一画布上]在相反的方向