版权声明：版权声明：本文为博主原创文章，未经博主允许不得转载。 https://blog.csdn.net/z564359805/article/details/88356547
<!DOCTYPE html>
<html>
<head>
<title></title>
<meta charset="utf-8">
<style type="text/css">
*{
padding: 0;
margin: 0;
}
.container{
width: 300px;
height: 300px;
/*border: 1px solid #000;*/
margin: 150px auto;
/*设置视距，看的远一点*/
perspective: 20000px;
}
.box{
width: 300px;
height: 300px;
/*控制子元素保持3D效果*/
transform-style: preserve-3d;
/*设置盒子旋转-测试代码*/
/*transform: rotateX(45deg) rotateY(45deg);*/
/*让魔方动起来*/
animation: ro 10s linear infinite;
/*animation-direction规定是否应该轮流反向播放动画*/
animation-direction: alternate;
}
/*设置动画*/
@keyframes ro{
0%{
transform: rotateX(45deg) rotateY(45deg);
}
100%{
transform: rotateX(360deg) rotateY(360deg);
}
}
.box-page{
width: 300px;
height: 300px;
/*初始化位置*/
position: absolute;
/*设置3d效果*/
transform-style: preserve-3d;
}
.top{
/*background-color: red;*/
/*向上移动150px*/
transform: translateZ(150px);
}
.bottom{
/*background-color: green;*/
transform: translateZ(-150px) rotateX(180deg);
}
.left{
/*background-color: orange;*/
transform: translateX(-150px) rotateY(-90deg);
}
.right{
/*background-color: pink;*/
transform: translateX(150px) rotateY(90deg);
}
.before{
/*background-color: blue;*/
transform: translateY(150px) rotateX(-90deg);
}
.after{
/*background-color: yellow;*/
transform: translateY(-150px) rotateX(90deg);
}
.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 2s infinite;
}
.box-page div:nth-child(6){
animation: a1 4.5s ease-in 2.5s;
}
.box-page div:nth-child(7){
animation: a1 4.5s ease-in 3s;
}
.box-page div:nth-child(8){
animation: a1 4.5s ease-in 3.5s;
}
.box-page div:nth-child(9){
animation: a1 4.5s ease-in 4s;
}
/*每个小面的九个图片的动画*/
@keyframes a1{
/*不动*/
0%{
/*scale缩放比例*/
transform: translateZ(0px) scale(1) rotateZ(0deg);
}
/*飞出去,飞没了*/
20%{
/*scale缩放比例，边飞边旋转*/
transform: translateZ(90px) scale(0.5) rotateZ(180deg);
}
50%{
transform: translateZ(180px) scale(0) rotateZ(360deg);
}
/*飞回来*/
80%{
transform: translateZ(300px) scale(0.5) rotateZ(720deg);
}
100%{
transform: translateZ(0px) scale(1) rotateZ(0deg);
}
}
</style>
</head>
<body>
<!-- 容器 -->
<div class="container">
<div class="box">
<div class="box-page top animation"></div>
<div class="box-page bottom"></div>
<div class="box-page left"></div>
<div class="box-page right"></div>
<div class="box-page before"></div>
<div class="box-page after"></div>
</div>
</div>
<script type="text/javascript">
arr = document.querySelectorAll(".box-page");
// 遍历六个面
for (var n = 0; n < arr.length; n++){
// 外循环控制行
for (var r = 0; r < 3; r++) {
// 内循环控制列
for (var c = 0; c < 3; c++) {
// 创建元素
var divs = document.createElement("div")
divs.style.cssText = "width: 100px;height: 100px;border: 2px solid #fff;box-sizing: border-box;position: absolute;background-image: url(img/a"+n+".jpg);background-size:300px 300px;";
arr[n].appendChild(divs);
divs.style.left = c*100+"px";
divs.style.top = r*100+"px";
// 背景图像定位
divs.style.backgroundPositionX = -c*100+"px";
divs.style.backgroundPositionY = -r*100+"px";
}
}
}
</script>
</body>
</html>
优化和改善特效：
<!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, red);
}
.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 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;
}
@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;
}
}
</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>效果：
