|CSS3之3D魔方鼠标控制酷炫效果( 二 )

本文插图
CSS3之3D魔方鼠标控制酷炫效果
然后我们通过JS控制展开和收起效果
var clickNum = 1;//点击次数 $('.box').children().click(function () { // 如果点击次数是奇数就展开，偶数就收起 if (clickNum % 2 == 0) { // 收起 $('.out-front').css({ transform: 'translateZ(100px)' }); $('.out-back').css({ transform: 'translateZ(-100px) rotateY(180deg)' }); $('.out-left').css({ transform: 'translateX(-100px) rotateY(-90deg)' }); $('.out-right').css({ transform: 'translateX(100px) rotateY(90deg)' }); $('.out-top').css({ transform: 'translateY(-100px) rotateX(90deg)' }); $('.out-bottom').css({ transform: 'translateY(100px) rotateX(-90deg)' }); } else { // 展开 $('.out-front').css({ transform: 'translateZ(200px)' }); $('.out-back').css({ transform: 'translateZ(-200px) rotateY(180deg)' }); $('.out-left').css({ transform: 'translateX(-200px) rotateY(-90deg)' }); $('.out-right').css({ transform: 'translateX(200px) rotateY(90deg)' }); $('.out-top').css({ transform: 'translateY(-200px) rotateX(90deg)' }); $('.out-bottom').css({ transform: 'translateY(200px) rotateX(-90deg)' }); } clickNum++; }); // box 的所有子元素添加鼠标手势样式 $('.box').children().mouseenter(function () { $(this).css({ cursor: 'pointer' }); });OK ，这样我们的 CSS3 3D魔方鼠标控制酷炫效果就实现了。
结语
大家学到了什么？JS鼠标事件都了解了吧？CSS3 3D场景都学会了吗？
关注我，学习更多前端知识，但不止于前端哦！
小伙伴们，有问题可以评论区留言哦，欢迎大家点评。需要源码的小伙伴可以购买，私信我哦。
谢谢大家一直以来的支持。