帮助中心
获取牛币
联系我们
关于我们
版权声明
素材牛首页
微博登录
QQ登录
微信扫码登录
注册
登录
新浪微博
QQ登陆
微信登录
热门搜索:
小程序
支付
Java
后台模板
上传
商城模板
jQuery
手机
Thinkphp
微信
Vue.js
首 页
网页特效
整站源码
PHP实例
网站模版
工具箱
常用代码
论坛
游戏源码
资源分享
当前位置:
首页
»
精选常用代码
» 3D标签选择效果代码
3D标签选择效果代码
浏览:854次
-
评论:0次
-
发布时间:2018-09-11
Html
Css
Js
One
Two
Three
Four
Five
Six
Seven
Eight
Nine
* { margin:0 auto; padding:0; } body,html { height:100%; /* 开启弹性布局 */ /* 使main标签居中 */ display:flex; justify-content:center; align-items:center; background:rgb(152,175,247); } main { width:700px; height:700px; /* border:1px solid white; */ /* 开启弹性布局 */ /* 使其中div标签从左往右排列 */ display:flex; /* flex-direction 即项目的排列方向 */ /* flex-direction:row(默认值): 主轴为水平方向,起点在左端; */ /* flex-direction:row-reverse: 主轴在水平方向,起点在右端 ; */ /* flex-direction:column:主轴为垂直方向,起点在上沿。 */ /* flex-direction:column-reverse:主轴为垂直方向,起点在下沿。 */ /* 垂直居中 */ align-items:center; /* flex-wrap 属性定义,如果一条轴线排不下,如何换行。 */ /* wrap: 换行,并且第一行在容器最上方; */ flex-wrap:wrap; } main div { width:200px; height:200px; border:3px solid white; /* 设置景深,以便于section的3D旋转 */ /* perspective景深值随意设置,但必须大于section的大小 */ perspective:1000px; } main div section { width:200px; height:200px; background:rgb(85,83,238); /* 定义section 3D旋转 */ transform-style:preserve-3d; /* 设置起始透明度为0 */ opacity:0; /* 设置过渡属性 */ transition:0.5s; text-align:center; line-height:200px; color:white; font-size:40px; font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Oxygen,Ubuntu,Cantarell,'Open Sans','Helvetica Neue',sans-serif; /* 鼠标经过样式 */ cursor:pointer; } main div:hover section { opacity:1; } main div:nth-child(1) section { /* transform-origin 此处旋转角度默认为 50% 50% 即section中间位置 */ transform:rotateX(90deg); } main div:nth-child(1):hover section { transform:rotateX(0); } main div:nth-child(2) section { /* transform-origin 此处旋转角度默认为 50% 50% 即section中间位置 */ transform:rotateY(90deg); } main div:nth-child(2):hover section { transform:rotateY(0); } main div:nth-child(3) section { /* 定义旋转点为section 的 x轴方向的0%位置,y轴方向的0%位置(相当于顶部) */ transform-origin:0% 0%; transform:rotateX(-90deg); } main div:nth-child(3):hover section { transform:rotateX(0); } main div:nth-child(4) section { /* 定义旋转点为section 的 x轴方向的0%位置,y轴方向的100%位置(相当于底部) */ transform-origin:0% 100%; transform:rotateX(90deg); } main div:nth-child(4):hover section { transform:rotateX(0); } main div:nth-child(5) section { /* 定义旋转点为section 的 x轴方向的0%位置,y轴方向的0位置(相当于顶部) */ transform-origin:0% 0%; transform:rotateY(90deg); } main div:nth-child(5):hover section { transform:rotateY(0); } main div:nth-child(6) { /* 设置第六个div超出隐藏 */ overflow:hidden; } main div:nth-child(6) section { /* 定义旋转点为section 的 x轴方向的0%位置,y轴方向的0位置(相当于左上角) */ transform-origin:0% 0%; transform:rotateZ(90deg); } main div:nth-child(6):hover section { transform:rotateZ(0); } main div:nth-child(7) { /* 设置第七个div超出隐藏 */ overflow:hidden; } main div:nth-child(7) section { /* 定义旋转点为section 的 x轴方向的100%位置,y轴方向的100%位置(相当于右下角) */ transform-origin:100% 100%; transform:rotateZ(90deg); } main div:nth-child(7):hover section { transform:rotateZ(0); } main div:nth-child(8) section { /* transform:translateZ()相当于你看事物,事物与你的远近,事物越远,你会感觉它越小,相反越大 */ transform:translateZ(-2000px); } main div:nth-child(8):hover section { transform:translateZ(0px); } main div:nth-child(9) { /* 设置第九个div超出隐藏 */ overflow:hidden; } main div:nth-child(9) section { /* transform:translateX(-200px) 相对与当前位置往左水平移动200px */ transform:translateX(-200px); } main div:nth-child(9):hover section { transform:translateX(0px); }
↑上面代码改变,会自动显示代码结果
jQuery调用版本:
1.11.3
<!doctype html><html><head><meta charset="utf-8"><title>3D标签选择效果代码-www.sucainiu.com</title><script src="https://libs.baidu.com/jquery/1.11.3/jquery.min.js"></script><style>
</style></head><body>
<script>
</script>
</body></html>
立即下载
收藏
积分说明:注册即送10牛币,每日签到可获得5牛币,成为VIP会员可永久免牛币下载!
充值积分
充值会员
更多说明»
代码描述:纯css编写鼠标悬停效果
注释写的很全,不懂得可以慢慢学,记得收藏哦
vue产品筛选效果
纯CSS3海浪,太阳,月亮动画效果
讨论这个常用代码(0)
回答他人问题或分享心得会奖励牛币
〒_〒 居然一个评论都没有……
文明上网,理性发言! 😉 阿里云幸运券,
戳我领取
发表评论
提交回复
我的积分余额:
0
已下载次数:
854
所需牛币:
5
开始下载
牛币获取:
签到、评论、充值
» 在线充值
(10牛币=1元)
成为VIP可永久免积分下载全部常用代码
» 查看详情
VIP
客服
签到
充值