Toggle navigation
在线编辑器
在线代码
文本比较
jQuery下载
前端库
在线手册
登录/注册
下载代码
html
css
js
分享到微信朋友圈
X
html
Fun with CSS
Front
This is on front.
Back
Top
This is what will be shown.
Bottom
Left
Right
Front
This is on front.
Back
Top
Bottom
This is what will be shown.
Left
Right
Front
This is on front.
Back
Top
Bottom
Left
This is what will be shown.
Right
Front
This is on front.
Back
Top
Bottom
Left
Right
This is what will be shown.
Front
This is on front.
Back
This is what will be shown.
Top
Bottom
Left
Right
Front
This is on front.
Back
This is what will be shown.
Top
Bottom
Left
Right
Front
This is on front.
Back
Top
This is what will be shown.
Bottom
Left
Right
Front
This is on front.
Back
Top
Bottom
This is what will be shown.
Left
Right
Front
This is on front.
Back
Top
Bottom
Left
This is what will be shown.
Right
Front
This is on front.
Back
Top
Bottom
Left
Right
This is what will be shown.
Front
This is on front.
Back
This is what will be shown.
Top
Bottom
Left
Right
Front
This is on front.
Back
This is what will be shown.
Top
Bottom
Left
Right
css
* { margin: 0; padding: 0; box-sizing: border-box; } body { padding: 100px; font-family: Arial, sans-serif; } h1, h2, h3, p { margin: 0 0 1em; } .wrap:after { content: ""; display: block; clear: both; } .box-rotate-wrap { float: left; margin: 0 30px 30px 0; perspective: 1000px; } .box, .box > div { width: 200px; height: 200px; } .box-rotate { position: relative; transition: all 0.8s ease; transform-style: preserve-3d; transform: translate3d(0, 0, -100px); } .box-rotate > div { position: absolute; top: 0; left: 0; z-index: 1; background: #fff; padding: 20px; overflow: auto; } .box-rotate img { position: absolute; top: 0; left: 0; width: 100%; height: 100%; } .box-rotate .front { background: red; z-index: 2; transform: rotate3d(0, 1, 0, 0deg) translate3d(0, 0, 100px); } .box-rotate .back { background: orange; transform: rotate3d(0, 1, 0, 180deg) rotate(180deg) translate3d(0, 0, 100px); } .box-rotate .top { background: purple; height: 200px; transform: rotate3d(1, 0, 0, 90deg) translate3d(0, 0, 100px); } .box-rotate .bottom { background: blue; height: 200px; transform: rotate3d(1, 0, 0, -90deg) translate3d(0, 0, 100px); } .box-rotate .left { background: yellow; transform: rotate3d(0, 1, 0, -90deg) translate3d(0, 0, 100px); } .box-rotate .right { background: green; transform: rotate3d(0, 1, 0, 90deg) translate3d(0, 0, 100px); } .box-rotate-top:hover { transform: translate3d(0, 0, -100px) rotate3d(1, 0, 0, -90deg); } .box-rotate-bottom:hover { transform: translate3d(0, 0, -100px) rotate3d(1, 0, 0, 90deg); } .box-rotate-left:hover { transform: translate3d(0, 0, -100px) rotate3d(0, 1, 0, 90deg); } .box-rotate-right:hover { transform: translate3d(0, 0, -100px) rotate3d(0, 1, 0, -90deg); } .box-rotate-back:hover { transform: translate3d(0, 0, -100px) rotate3d(1, 0, 0, -180deg); } .box-rotate-gyro .back { width: 200px; height: 200px; transform: rotate3d(0, 1, 0, 180deg) rotate(90deg) translate3d(0px, 0px, 100px); } .box-rotate-gyro:hover { transform: translate3d(0, 0, -100px) rotate3d(1, 1, 0, -180deg); } .box.box-blend div { background: #fff; box-shadow: 0 0 1px rgba(0, 0, 0, 0.8); }
JavaScript
粒子
时间
文字
hover
canvas
3d
游戏
音乐
火焰
水波
轮播图
鼠标跟随
动画
css
加载动画
导航
菜单
按钮
滑块
tab
弹出层
统计图
svg
×
Close
在线代码下载提示
开通在线代码永久免费下载,需支付20jQ币
开通后,在线代码模块中所有代码可终身免费下!
您已开通在线代码永久免费下载,关闭提示框后,点下载代码可直接下载!
您已经开通过在线代码永久免费下载
对不起,您的jQ币不足!可通过发布资源 或
直接充值获取jQ币
取消
开通下载
<!doctype html> <html> <head> <meta charset="utf-8"> <title>CSS鼠标悬停3D框转换-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号