3D初探
编辑器制作效果展示：
代码展示：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
#d1 {perspective: 2000px;perspective-origin: 500px -500px;position: absolute;width: 200px;height: 200px;left: 50%;top: 50%;margin-left: -100px;margin-top: -100px}
#d {transition: all 2s;width: 200px;height: 200px;transform-style: preserve-3d;position: absolute}
#d:hover {transform: rotate3d(0, 1, 0, -90deg)}
#d:hover .d6 {transform: rotate3d(0, 1, 0, 90deg) translateX(-200px) translateZ(-100px)}
#d div {transition: all 1s;border-radius: 50px;line-height: 200px;text-align: center;color: red;font-size: 50px;width: 200px;height: 200px;border: 1px solid black;background-color: deepskyblue;opacity: 1;position: absolute}
.d1 {transform: translateZ(-100px) rotateZ(-180deg) rotateY(-180deg)}
.d2 {transform: translateX(-100px) rotateY(-90deg)}
.d3 {transform: translateY(100px) rotateX(270deg)}
.d4 {transform: translateY(-100px) rotateX(90deg)}
.d5 {transform: translateX(100px) rotateY(90deg)}
.d6 {transform: translateZ(100px)}
</style>
</head>
<body>
<div id="d1">
<div id="d">
<div class="d1">3</div>
<div class="d2">5</div>
<div class="d3">4</div>
<div class="d4">2</div>
<div class="d5">6</div>
<div class="d6">1</div>
</div>
</div>
</body>
</html>
整理笔记时发现自己做的小demo,传上来了，么么哒！