當前位置：
首頁 >
旋转的立方体
發布時間：2023/11/27
42
豆豆
最近總是糾結去哪里吃飯，所以就想著做了一個色子，也算是朝花夕拾了，最后做出來的是一個旋轉的立方體，整體美感還好：實現了永久旋轉，懸浮停止和突出及一個分散的效果：以下是代碼：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>立方體旋轉</title>
<style type="text/css">
*{margin:0 auto;padding:0;
}
@keyframes rotate{0%{transform:rotateX(0deg) rotateY(0deg);}100%{transform:rotateX(360deg) rotateY(360deg);}
}html{height:100%;
}
.wrap{width: 200px;height: 200px;margin-top:200px;perspective: 1000px;
}
.cube{width:200px;height:200px;position:relative;color:#fff;font-size:36px;text-align:center;line-height:200px;transform-style:preserve-3d;transform:rotateX(-30deg) rotateY(-70deg); animation:rotate 20s infinite linear;
}
.cube > div{width:100%;height:100%;border:1px solid #fff;position:absolute;background:rgba(0,0,0,.5);opacity:.5;transition:transform 0.5s ease-out;
}
.cube > div >img{width: 200px;height: 200px;
}
.cube .out-front{transform: translateZ(100px);
}
.cube .out-back{transform: translateZ(-100px) rotateY(180deg);
}
.cube .out-left{transform: translateX(-100px) rotateY(-90deg);
}
.cube .out-right{ transform: translateX(100px) rotateY(90deg);
}
.cube .out-top{transform: translateY(-100px) rotateX(90deg);
}
.cube .out-bottom{transform: translateY(100px) rotateX(-90deg);
}
.cube .in-front{transform: translateZ(50px);
}
.cube .in-back{transform: translateZ(-50px) rotateY(180deg);
}
.cube .in-left{transform: translateX(-50px) rotateY(-90deg);
}
.cube .in-right{transform: translateX(50px) rotateY(90deg);
}
.cube .in-top{transform: translateY(-50px) rotateX(90deg);
}
.cube .in-bottom{transform: translateY(50px) rotateX(-90deg);
}
.wrap:hover .out-front{transform: translateZ(200px);
}
.wrap:hover .out-back{transform: translateZ(-200px) rotateY(180deg);
}
.wrap:hover .out-left{transform: translateX(-200px) rotateY(-90deg);
}
.wrap:hover .out-right{transform: translateX(200px) rotateY(90deg);
}
.wrap:hover .out-top{transform: translateY(-200px) rotateX(90deg);
}
.wrap:hover .out-bottom{transform: translateY(200px) rotateX(-90deg);
}</style>
</head>
<body>
<div class="wrap"><div class="cube cubeX"><div class="out-front"><img src="./img/1.jpg" alt=""></div><div class="out-back">kim</div><div class="out-left"><img src="./img/3.jpg" alt=""></div><div class="out-right"><img src="./img/4.jpg" alt=""></div> <div class="out-top"><img src="./img/5.jpg" alt=""></div><div class="out-bottom"><img src="./img/6.jpg" alt=""></div></div>
</div>
</body>
<script type="text/javascript" src="jquery-1.8.1.js"></script><script>$(".cube > div").mouseover(function(){$(".cube").css({"animation-play-state":"","animation-duration":"7s"});$(this).css("opacity",1);}).mouseout(function(){$(".cube").css({"animation-play-state":"","animation-duration":"20s"});$(this).css("opacity",.5);})</script>
</html>
以上利用了transform屬性和旋轉的屬性，實現了立方體的拼接，旋轉。整體代碼巨簡單，jq因為是本地引入，具體路徑與版本需看自己的情況。
?
轉載于:https://www.cnblogs.com/wyliunan/p/8295797.html
總結
- 上一篇： 顺产要多少钱啊？
- 下一篇： 我的hadoop学习之路