|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场景都学会了吗？
关注我，学习更多前端知识，但不止于前端哦！
小伙伴们，有问题可以评论区留言哦，欢迎大家点评。需要源码的小伙伴可以购买，私信我哦。
谢谢大家一直以来的支持。

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

推荐阅读

卫星|一箭双星！中国成功发射遥感三十二号02组卫星

卡车之家@卡威K150GT来头可不小，真香警告！10元的“国产猛禽”皮卡

又一家电巨头"撤离"中国？外企相继离开，难道说中国家电崛起？

「稀饭玩数码」X2屏实力胜过P40系列，KOL投票显示用户看重屏幕大于拍照，Find

『髦丫头』私服也太美了，难怪杜海涛爱得不要不要的，有颜还是腿精的沈梦辰

玲玲聊科技|骁龙865加持还镶嵌一颗钻石，最奢侈5G手机？劳力士表盘设计风格

今天去办银行卡，连个驾照都没有，工作人员就给我办了车主卡。这个车主卡个普通的车主卡有啥不一样么

再不来|世上真有穿越者？考古发现一明代石碑，碑上刻着：扯淡，再不来了

科技热门话题：看杭州城西银泰城的直播方法论。，深耕内容是王道

三角梅@家里有这3种花，大水大肥养，夏天要“暴晒”，晒的狠开的多

大幅波动|聚焦创业板改革：从“别人家的新股”说起

什么样的核桃好吃

玲珑文史|但“放大招”全靠他们，唐朝骑兵有多牛？人数仅仅占全军的29%

新偶像守护台|伊能静18岁儿子“超辣女装照”外泄！迷你短裙引网友热议

留言qq祝福(留言qq祝福大全)

健身教练我的快递员，竟是健身教练！上海网友：收完货没脸再吃啦

辽宁发生刑案1死1伤|辽宁建昌发生刑案致1死1伤 17岁犯罪嫌疑人被抓获

鸡脖的做法

【肝脏】贡献一个治“口腔溃疡”的小单方！只图你安康，不图你感谢

吃空饷|中国对外文化集团回应“郑云龙疑似吃空饷”：正在核实