自己做的小作品

来源:互联网 发布:博弈树搜索算法 源码 编辑:程序博客网 时间:2024/04/28 18:07
<!DOCTYPE html><html><head><meta charset="UTF-8"><title>正方体</title><link rel="stylesheet" type="text/css" href="css/正方体.css"/></head><body><div class="beijin"><div class="wutai"> <div class="F1"></div> <div class="F2"></div> <div class="F3"></div> <div class="F4"></div> <div class="F5"></div> <div class="F6"></div> </ul></div></div></body></html>

.beijin{width: 1000px;height: 800px;background: #CCCCCC;position: relative;    margin: auto;    perspective: 800px;    }.wutai{width: 200px;height: 200px;position: absolute;top: 50%;left: 50%;margin: -100px 0 0 -100px;transform-style: preserve-3d;animation: zhuang 15s linear infinite;}@keyframes zhuang{ 100%{ transform: rotateX(360deg) rotateY(360deg) }}.wutai div{width: 200px;height: 200px;position: absolute;}.F1{background: aqua;transform: translateZ(100px);}.F2{background: red;transform: translateZ(-100px);}.F3{background: orange;transform: rotateY(90deg) translateZ(100px);}.F4{background: orchid;transform: rotateY(-90deg) translateZ(100px);}.F5{background: black;transform: rotateX(90deg) translateZ(100px);}.F6{background: blue;transform: rotateX(-90deg) translateZ(100px);}
这是一个会自转的正方体
0 0
原创粉丝点击