前端实现3D魔方旋转特效
2023-09-11 14:18:53 时间
代码自用自取,复制粘贴直接使用,喜欢的话可以查看博主其它文章,贡献一丢丢的浏览量,感激不尽。
先看一下效果
<!DOCTYPE html>
<html>
<head>
<title>魔方</title>
<meta charset="utf-8">
<style type="text/css">
*{
margin: 0;
padding: 0;
}
body{
width: 100%;
height: 100%;
background: radial-gradient(#fff, black);
}
.container{
width:300px;
height:300px;
margin:200px auto;
perspective:20000px;
}
.box{
width:300px;
height:300px;
border:1px solid transparent;
box-sizing: border-box;
position:relative;
transform-style:preserve-3d;
/*transform:rotateX(30deg) rotateY(30deg);*/
animation: rotate 7s linear infinite;
}
@keyframes rotate{
100%{
transform:rotatex(360deg) rotatey(360deg) rotatez(360deg);
}
}
.box-page{
width: 300px;
height: 300px;
position:absolute;
box-sizing: border-box;
transform-style:preserve-3d;
}
.top{
transform: translateZ(150px);
}
.bottom{
transform: translateZ(-150px) rotateX(180deg);
}
.right{
transform: translateX(150px) rotateY(90deg);
}
.left{
transform: translateX(-150px) rotateY(-90deg);
}
.after{
transform: translateY(-150px) rotateX(90deg);
}
.before{
transform: translateY(150px) rotateX(-90deg);
}
.box-page div:first-child,.box-page div:nth-child(3),.box-page div:nth-child(5),.box-page div:nth-child(7),.box-page div:nth-child(9){
transform: rotateY(0deg);
animation: rotatey 7s linear infinite;
}
@keyframes rotatey{
20%{
transform: rotateY(0deg);
background-size: 300px 300px;
}
40%{
/*background-image: url("img/img.jpg");*/
transform: rotateY(540deg);
background-size: 100px 100px;
}
60%{
/*background-image: url("img/img.jpg");*/
transform: rotateY(540deg);
background-size: 100px 100px;
}
80%{
transform: rotateY(0deg);
background-size:300px 300px;
}
}
.box-page div:nth-child(2),.box-page div:nth-child(4),.box-page div:nth-child(6),.box-page div:nth-child(8){
transform:rotateX(0deg);
animation: rotatex 10s linear infinite;
}
@keyframes rotatex{
20%{
transform: rotateX(0deg);
background-size: 300px 300px;
}
40%{
/*background-image: url("img/img.jpg");*/
transform: rotateX(540deg);
background-size: 100px 100px;
}
60%{
/*background-image: url("img/img.jpg");*/
transform: rotateX(540deg);
background-size: 100px 100px;
}
80%{
transform: rotateX(0deg);
background-size: 300px 300px;
}
}
</style>
</head>
<body>
<div class="container">
<div class="box">
<div class="top box-page"></div>
<div class="bottom box-page"></div>
<div class="left box-page"></div>
<div class="right box-page"></div>
<div class="before box-page"></div>
<div class="after box-page"></div>
</div>
</div>
<script type="text/javascript">
var arr = document.querySelectorAll(".box>div");
for(var n = 0;n<arr.length;n++){
for(var i=0;i<3;i++){
for(var j=0;j<3;j++){
var divs = document.createElement("div");
divs.style.cssText = "width:100px;height:100px;border: 1px solid #fff;position:absolute;box-sizing:border-box;background-image:url(img/a"+n+".jpg);background-size: 300px 300px;";
arr[n].appendChild(divs);
// 改变每一个div的位置
divs.style.left = 100*j+"px";
divs.style.top = 100*i+"px";
// 改变背景图相应的位置
divs.style.backgroundPositionX = -j*100+"px";
divs.style.backgroundPositionY = -i*100+"px";
}
}
}
</script>
</body>
</html>
这是所有源码,魔方六个面的图片是自己定义的,与.html文件一起放一个名为img的文件夹即可,六张图片的命名为a0-a5的jpg格式,这是我目前设定的,这些都可以自己改动。
有什么问题可以联系QQ:505417246
关注下面微信公众号,可以领取微信小程序、Vue、TypeScript、前端、uni-app、全栈、Nodejs、Python等实战学习资料
相关文章
- 真正彻底:清理掉Win10"另存为"和"此电脑"里的无用文件夹【3D对象、视频、图片、文档、下载、音乐、桌面】
- 基于 HTML5 WebGL 的 3D 服务器与客户端的通信
- PS如何制作超酷3D字效果
- 《安富莱嵌入式周报》第298期:迷你火星探测器,开源单片机3D实时渲染库, 开源USB工业相机,VS2022开始支持MarkDown,PC-lint 2.0发布
- 3D图形处理库
- Android 自定义3D效果View
- 〖大前端 - 基础入门三大核心之CSS篇㉑〗- 3D变形 与空间移动
- Qt通过OpenGL实现3d游戏开发框架
- SDL渲染3D动画图片
- 【回答问题】ChatGPT上线了!有哪些3D点云算法模型?3D点云算法模型实现代码?
- 深入浅出matplotlib(45):常用3D图形一
- 【Unity 3D】学习笔记29:游戏的例子——简单的小制作地图
- 3D游戏引擎设计与实现(14)
- 3D游戏从入门到精通-26
- 3D游戏从入门到精通-31
- 3D游戏从入门到精通-11
- 【三】3D匹配Matching之曲面匹配Surface—Based——read_surface_model()/write_surface_model()算子