发文章
发文工具
撰写
网文摘手
文档
视频
思维导图
随笔
相册
原创同步助手
其他工具
图片转文字
文件清理
AI助手
留言交流
纯CSS实现3D正方体动画效果,此方法是通过transform的旋转(rotate)和位移(translate)实现的,具体效果是鼠标滑过时正方体的一个面会产生位移
效果图
先在body里添加div作为参考,再在这个div里添加六个div,分别代表正方体的六个面
<div class="cube"> <div class="cube-3D"> <div class="front">前</div> <div class="rear">后</div> <div class="left">左</div> <div class="right">右</div> <div class="top">上</div> <div class="foot" >下</div> </div> </div>
.cube { height: 300px; width: 240px; text-align: center; float: left; } .cube-3D { width: 41px; height: 41px; margin: auto; margin-top: 50px; text-align: center; transform: rotateX(45deg) rotateY(-45deg); transform-style: preserve-3d; font-size: 0; } .cube-3D div { width: 41px; height: 41px; position: absolute; left: 0; top: 0; /* opacity: 0.5; */ background-color: white; border: 0.5px solid #82C14C; transition: 0.6s; } .front {transform: translateZ(21px);} .rear {transform: translateZ(-21px);} .left {transform: translateX(-21px) rotateY(-90deg);} .right {transform: translateX(21px) rotateY(-90deg);} .top {transform: translateY(-21px) rotateX(90deg);} .foot {transform: translatey(21px) rotateX(-90deg);}
效果:
可以先将cube-3D下的div设置透明度,方便观察
其中核心的代码时cube-3D里的 transform-style: preserve-3d;
<div class="cube"> <div class="cube-3D"> <div class="front">前</div> <div class="rear">后</div> <div class="left">左</div> <div class="right">右</div> <div class="top">上</div> <div class="foot foot-hover" >下</div> </div> </div>
在foot(正方体的底面)添加一个类(foot-hover),单独设置这个面的样式
.foot-hover, { background-color: #8BC65A !important; opacity: 0.8; }
我们要的效果就是鼠标移上去底面往下移动一段距离,那么在hover时只需设置translateY的值即可
代码:
.cube:hover .foot-hover { transform: translateY(40px) rotatex(-90deg); }
这时我们会发现,正方体底部会出现镂空的效果,不太好看,我们想要的是下图的这种效果,其实实现很简单
其实实现上图那种效果并不是很麻烦,只需要再复制一个底部div就行,再改一下颜色即可
代码如下:
<div class="cube"> <div class="cube-3D"> <div class="front">前</div> <div class="rear">后</div> <div class="left">左</div> <div class="right">右</div> <div class="top">上</div> <div class="foot" style="background-color: #E4F0DA;">下</div> <div class="foot foot-hover" >下</div> </div> </div>
由于行内样式优先级高于外部样式,所以行内样式会覆盖外部样式的背景颜色。
再将div为cube的盒子再复制四个,改一下cube的rotateX和rotateY的值即可,完整代码如下:
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>3D</title> <style type="text/css"> /* 研究开始 */ .yan-Jiu { height: 510px; width: 100%; margin-top: 100px; background-color: #eee; } .yan-Jiu-center { width: 1200px; margin: auto; height: 420px; color: #6B6B6B; } .cube-3D { width: 41px; height: 41px; margin: auto; margin-top: 50px; text-align: center; transform: rotateX(45deg) rotateY(-45deg); transform-style: preserve-3d; font-size: 0; } .cube-3D div { width: 41px; height: 41px; position: absolute; left: 0; top: 0; /* opacity: 0.5; */ background-color: white; border: 0.5px solid #82C14C; transition: 0.6s; } .front { transform: translateZ(21px); } .rear { transform: translateZ(-21px); } .left { transform: translateX(-21px) rotateY(-90deg); } .right { transform: translateX(21px) rotateY(-90deg); } .top { transform: translateY(-21px) rotateX(90deg); } .foot { transform: translatey(21px) rotateX(-90deg); } .cube { height: 300px; width: 240px; text-align: center; float: left; } .foot-hover, .right-hover, .top-hover, .front-hover { background-color: #8BC65A !important; opacity: 0.8; } .yan-Jiu:hover .foot-hover { transform: translateY(40px) rotatex(-90deg); } .yan-Jiu:hover .right-hover { transform: translateX(40px) rotateY(-90deg); } .yan-Jiu:hover .top-hover { transform: translateY(-40px) rotateX(90deg); } .yan-Jiu:hover .front-hover { transform: translatez(40px); } .yj-3d-3 { transform: rotateX(-45deg) rotateY(-45deg); } </style> </head> <body> <div class="yan-Jiu w"> <div class="yan-Jiu-body ban"> <div class="yan-Jiu-center"> <div class="cube"> <div class="cube-3D"> <div class="front">前</div> <div class="rear">后</div> <div class="left">左</div> <div class="right">右</div> <div class="top">上</div> <div class="foot " style="background-color: #E4F0DA;">下</div> <div class="foot foot-hover">下</div> </div> </div> <div class="cube "> <div class="cube-3D "> <div class="front">前</div> <div class="rear">后</div> <div class="left">左</div> <div class="right right-hover">右</div> <div class="right " style="background-color: #E4F0DA;">下</div> <div class="top">上</div> <div class="foot">下</div> </div> </div> <div class="cube"> <div class="cube-3D yj-3d-3"> <div class="front">前</div> <div class="rear">后</div> <div class="left">左</div> <div class="right right-hover">右</div> <div class="right" style="background-color: #E4F0DA;">下</div> <div class="top">上</div> <div class="foot">下</div> </div> </div> <div class="cube"> <div class="cube-3D yj-3d-3"> <div class="front">前</div> <div class="rear">后</div> <div class="left">左</div> <div class="right">右</div> <div class="top " style="background-color: #E4F0DA;">下</div> <div class="top top-hover">上</div> <div class="foot">下</div> </div> </div> <div class="cube"> <div class="cube-3D"> <div class="front " style="background-color: #E4F0DA;">下</div> <div class="front front-hover">前</div> <div class="rear">后</div> <div class="left">左</div> <div class="right">右</div> <div class="top">上</div> <div class="foot">下</div> </div> </div> </div> </div> </div> </body> </html>
以上就是今天小谭要分享的内容,小谭也只是刚刚入门的萌新,代码写的不是很规范,在给div命名时也很随意,如果有什么不足之处也请各位大佬手下留情,多多包涵,小谭也欢迎各位大佬指点一二,小谭不胜荣幸,感谢包容,感谢观看,靴靴!
来自: python_lover > 《待分类》
0条评论
发表
请遵守用户 评论公约
网页制作CSS之hover的三种使用方法
基于HTML的3D立方体相册下载
text-shadow: 0px 1px 0px #999, 0px 2px 0px #888, 0px 3px 0px #777, 0px 4px 0px #666, 0px 5px 0px #555, 0px 6px 0px #444, 0px 7px 0px #333, 0px 8px 7px #001135;
CSS实现各种Loading效果附带解析
@-webkit-keyframes sk-rotate { 100% { -webkit-transform: rotate(360deg) }}@keyframes sk-rotate { 100% { transform: rotate(360deg);.sk-fading-circle .sk-circle { width: 100%;HTML<div c...
6-50 动画效果-变形
translateX(x) 定义转换,只是用 X 轴的值。translateY(y) 定义转换,只是用 Y 轴的值。skew(x-angle,y-angle) 定义沿着 X 和 Y 轴的 2D 倾斜转换。kewX(angle) 定义沿着 X 轴的 2D 倾斜转换。transfor...
CSS3——2D变形(CSS3) transform
CSS3——2D变形(CSS3) transform."UTF-8"><title>旋转</title><style>div {width: 200px;height: 200px...
如何快速上手基础的CSS3动画
如何快速上手基础的CSS3动画。说起CSS3动画,就必须说说 transform,translate,transition,animation这4个属性,transform主要定义元...
CSS3实现圆环进度条
CSS3实现圆环进度条。实现圆环进度条属性,我们利用 css 画扇形,然后结合 css3 的动画属性去实现。<div class="circle-progress"> <div class="content left"> <d...
CSS3 实现六边形Div图片展示效果
因为前两层 div 中没有东西,纯粹就是用来旋转得到6边形的,所以对1,2层 div 设置 visibility: hidden; 而第3层 div 是放图片的,需要...
css3 绘制苹果图标
} .handle:before { clip: rect(0 13px 80px 0px);} .handle:after { clip: rect(14px 100px 76px...
微信扫码,在手机上查看选中内容