css+js 实现炫酷的魔方旋转

魔方的简单旋转

（后续会有进阶版）
先附上效果图（图片大小限制，效果图不是很明显）

图片可以在img文件夹中自己添加（注意命名格式）
关于魔方图片代码位置如下图显示（在script部分）

这是命名格式（本人杰伦粉QAQ）

html部分


<!DOCTYPE html>
<html>
<head><title>魔方</title><meta charset="utf-8"><link rel="stylesheet" type="text/css" href="css1.css">
</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>

css代码部分
（保存成.css1文件）

*{margin: 0;padding: 0;}body{width: 100%;height: 100%;background: radial-gradient(#fff, red); }.container{width:300px;height:300px;margin:200px auto;perspective:2000px;}.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 10s 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 6s linear infinite;}*/box-page div:nth-child(1){
animation：a1 4.5s ease-in;
}
.box-page div:nth-child(2){
animation:a1 4.5s ease-in 0.5s;
}
.box-page div:nth-child(3){
animation：a1 4.5s ease-in 1s;
}
.box-page div:nth-child(4){
animation:a1 4.5s ease-in 1.5s;
}
.box-page div:nth-child(5){
animation:a1 4.5s ease-in o.5s;
}
.box-page div:nth-child(6){
animation:a1 4.5s ease-in 0.5s;
}
.box-page div:nth-child(7）（
animation：a1 4.5s ease-in 0.5s;
}
.box-page div:nth-child(8){
animation：a1 4.5s ease-in 0.5s;@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 6s 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;}}

关于魔方旋转的进阶版，后续会更新，敬请期待，感谢支持。

css+js 实现炫酷的魔方旋转相关推荐

HTML+CSS+JS制作炫酷【烟花特效】
文章目录制作炫酷烟花特效一.普通烟花(分散形) HTML代码 CSS代码 JS代码二.圆形烟花 HTML代码 CSS代码 JS代码三.爱心形烟花 HTML代码 CSS代码 JS代码四.源码获 ...
HTML+CSS+JS 实现炫酷效果，你知道几种呢？
1.实现美元飘落效果 HTML代码如下 <!DOCTYPE html> <html style="overflow-x:hidden"> <head& ...
[译] CSS 变量实现炫酷鼠标悬浮效果
原文: Stunning hover effects with CSS variables 我的博客:[译] CSS 变量实现炫酷鼠标悬浮效果我最近从Grover网站上的有趣的悬停动画中获得灵感.将 ...
html中flash的简单动画效果,css实现快速炫酷抖动动画效果
1.Animate.css简介 Animate.css是一个可在您的Web项目中使用的即用型跨浏览器动画库.非常适合强调,首页,滑块和引导注意的提示.它是一个来自国外的 CSS3 动画库,它预设了抖动 ...
html+css+javaScript实现炫酷烟花表白(云雾状粒子文字3D开场)七夕情人节表白/520表白源码HTML...
❉ html+css+javaScript实现炫酷烟花表白❤ (云雾状粒子文字3D动画自动切换,支持自定义文字动画切换特效)/ 程序员表白必备一年一度的/520情人节/七夕情人节/生日礼物/告白 ...
几个炫酷的3D旋转动态效果（附代码）
之前,我们发布了极客编程挑战赛,竞赛题目是"制作炫酷的3D旋转动态显示效果",想知道更多信息,请前往以下地址进行了解:http://www.gbtags.com/gb/share/ ...
css炫酷标题,分享几个CSS小众但炫酷的技巧
1. 黑白图像这段代码会让你的彩色照片显示为黑白照片,是不是很酷? 复制代码代码如下: img.desaturate { filter: grayscale(100%); -webkit-filte ...
Mapbox GL JS实现炫酷的地图背景
经常看到网上的各种地图,有着炫酷的地图背景,用户体验非常不错.在Mapbox GL JS这块,其实关于地图的背景没有太多的设置.但当我们想基于Mapbox GL JS实现炫酷的地图背景改怎么办呢?这里 ...
使用Three.js实现炫酷的赛博朋克风格3D数字地球大屏
声明:本文涉及图文和模型素材仅用于个人学习.研究和欣赏,请勿二次修改.非法传播.转载.出版.商用.及进行其他获利行为. 背景近期工作有涉及到数字大屏的需求,于是利用业余时间,结合 Three.js ...

css+js 实现炫酷的魔方旋转

魔方的简单旋转

css+js 实现炫酷的魔方旋转相关推荐

最新文章

热门文章