Toggle navigation
在线编辑器
在线代码
文本比较
jQuery下载
前端库
在线手册
登录/注册
下载代码
html
css
js
分享到微信朋友圈
X
html
HOVER ME
HOVER ME
HOVER ME
HOVER ME
HOVER ME
HOVER ME
HOVER ME
rotate menu
by Wagner Moschini
css
*{ margin:0; padding:0; } body{ color:#fff; background:#2c3e50; font-size: 12px; min-width: 800px; display: block; position: relative; } .wrapcube{ -webkit-perspective: 2000px; perspective: 2000px; -webkit-perspective-origin: center center; perspective-origin: center center; width:200px; height:320px; position:absolute; top:50px; left:50px; } .cube{ width:100%; height:50px; margin:0 0 0 0; position:relative; -webkit-transition:.25s all ease-out; transition:.25s all ease-out; -webkit-transform-style: preserve-3d; transform-style: preserve-3d; font-family: arial, helvetica, sans-serif; text-align: center; line-height: 4.5; } #a{z-index:1;} #b{z-index:2;} #c{z-index:3;} #d{z-index:4;} #e{z-index:3;} #f{z-index:2;} #g{z-index:1;} .cube[data-rotate='1']{ -webkit-transform: rotateY(3deg) translateZ(-00px) translateX(0px); transform: rotateY(3deg) translateZ(-00px) translateX(0px); } .cube[data-rotate='2']{ -webkit-transform: rotateY(6deg) translateZ(-00px) translateX(0px); transform: rotateY(6deg) translateZ(-00px) translateX(0px); } .cube[data-rotate='3']{ -webkit-transform: rotateY(9deg) translateZ(-00px) translateX(0px); transform: rotateY(9deg) translateZ(-00px) translateX(0px); } .cube[data-rotate='4']{ -webkit-transform: rotateY(12deg) translateZ(-00px) translateX(0px); transform: rotateY(12deg) translateZ(-00px) translateX(0px); } .cube[data-rotate='5']{ -webkit-transform: rotateY(15deg) translateZ(-00px) translateX(0px); transform: rotateY(15deg) translateZ(-00px) translateX(0px); } .cube[data-rotate='6']{ -webkit-transform: rotateY(18deg) translateZ(-00px) translateX(0px); transform: rotateY(18deg) translateZ(-00px) translateX(0px); } .side{ width:100%; height:100%; position:absolute; backface:hidden; } .front { height:50px; -webkit-transform: rotateY(0deg) rotateX(0deg) rotateZ(0deg) translateZ(100px); transform: rotateY(0deg) rotateX(0deg) rotateZ(0deg) translateZ(100px); } .left { height:50px; -webkit-transform: rotateY(-90deg) rotateX(0deg) rotateZ(0deg) translateZ(100px); transform: rotateY(-90deg) rotateX(0deg) rotateZ(0deg) translateZ(100px); } .right { height:50px; -webkit-transform: rotateY(90deg) rotateX(0deg) rotateZ(0deg) translateZ(100px); transform: rotateY(90deg) rotateX(0deg) rotateZ(0deg) translateZ(100px); } .back { height:50px; -webkit-transform: rotateY(-180deg) rotateX(0deg) rotateZ(0deg) translateZ(100px); transform: rotateY(-180deg) rotateX(0deg) rotateZ(0deg) translateZ(100px); } .top { height:200px; -webkit-transform: rotateY(0deg) rotateX(90deg) rotateZ(0deg) translateZ(100px); transform: rotateY(0deg) rotateX(90deg) rotateZ(0deg) translateZ(100px); } .bottom { height:200px; -webkit-transform: rotateY(0deg) rotateX(-90deg) rotateZ(0deg) translateZ(-50px); transform: rotateY(0deg) rotateX(-90deg) rotateZ(0deg) translateZ(-50px); } #a .side{ background:#16a085; } #a .front{ background:#1abc9c; } #b .side{ background:#27ae60; } #b .front{ background:#2ecc71; } #c .side{ background:#2980b9; } #c .front{ background:#3498db; } #d .side{ background:#8e44ad; } #d .front{ background:#9b59b6; } #e .side{ background:#f39c12; } #e .front{ background:#f1c40f; } #f .side{ background:#d35400; } #f .front{ background:#e67e22; } #g .side{ background:#c0392b; } #g .front{ background:#e74c3c; } h1{ font-size: 8em; font-family: 'Lobster Two'; font-style: italic; text-align: right; line-height: .3; display: table; position: absolute; top: 60px; right: 30px; text-shadow: 2px 4px rgba(0,0,0,.3); color: #ecf0f1; } h1 small{ font-size: .2em; }
JavaScript
var $el = $(".cube"); var rotate = function(index){ var index = index || 0; $el.each(function(e){ $(this).attr("data-rotate",Math.abs($(this).index() - index)); }); } $el.hover(function(e){ var index = $(this).index(); rotate(index); }); rotate(0);
粒子
时间
文字
hover
canvas
3d
游戏
音乐
火焰
水波
轮播图
鼠标跟随
动画
css
加载动画
导航
菜单
按钮
滑块
tab
弹出层
统计图
svg
×
Close
在线代码下载提示
开通在线代码永久免费下载,需支付20jQ币
开通后,在线代码模块中所有代码可终身免费下!
您已开通在线代码永久免费下载,关闭提示框后,点下载代码可直接下载!
您已经开通过在线代码永久免费下载
对不起,您的jQ币不足!可通过发布资源 或
直接充值获取jQ币
取消
开通下载
<!doctype html> <html> <head> <meta charset="utf-8"> <title>有趣的CSS3菜单-jq22.com</title> <script src="https://www.jq22.com/jquery/jquery-1.10.2.js"></script> <style>
</style> </head> <body>
<script>
</script>
</body> </html>
2012-2021 jQuery插件库版权所有
jquery插件
|
jq22工具库
|
网页技术
|
广告合作
|
在线反馈
|
版权声明
沪ICP备13043785号-1
浙公网安备 33041102000314号