如何制作一个旋转的正方体
来源：3-4 编程挑战
森林迷了鹿Andera
2016-06-16 10:38
思路是什么？求高手指点。。。
写回答
关注
3回答
-
- 24k大金牙
- 2016-06-20 14:21:07
<!DOCTYPE html> <html lang="cn"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1, maximum-scale=1, user-scalable=no"> <meta name="format-detection" content="telephone=no"> <meta http-equid=“X-UA-Compatible” content=“IE=edge, chrome=1”> <title>正方体</title> <style> html { background: -webkit-radial-gradient(center, ellipse, #430d6d 0%, #000000 100%); background: radial-gradient(ellipse at center, #430d6d 0%, #000000 100%); height: 100%; } #window { width: 20em; height: 20em; position: absolute; left: 50%; top:50%; margin-left: -10em; margin-top: -10em; -webkit-perspective: 1000px; } #box{ -webkit-animation: 6s spin linear infinite; position: absolute; width: 100%; height: 100%; -webkit-transform-style: preserve-3d; transform-style: preserve-3d; -webkit-transform: rotateX(-20deg) rotateY(-20deg); } .face { background: -webkit-linear-gradient(left, rgba(54, 226, 248, 0.5) 0px, rgba(54, 226, 248, 0.5) 3px, rgba(0, 0, 0, 0) 0px), -webkit-linear-gradient(top, rgba(54, 226, 248, 0.5) 0px, rgba(54, 226, 248, 0.5) 3px, rgba(0, 0, 0, 0) 0px); -webkit-background-size: 2.5em 2.5em; background-color: rgba(0, 0, 0, 0.5); position: absolute; width: 100%; height: 100%; color: #77ffb9; box-shadow: inset 0 0 5em rgba(125, 125, 125, 0.8); } #face-front { transform: translateZ(10em); } #face-left { -webkit-transform: rotateY(-90deg) translateZ(10em); } #face-top { -webkit-transform: rotateX(90deg) translateZ(10em); } #face-right { -webkit-transform: rotateY(90deg) translateZ(10em); } #face-bottom { -webkit-transform: rotateX(-90deg) translateZ(10em); } #face-back { -webkit-transform: rotateX(180deg) translateZ(10em); } @-webkit-keyframes spin { from { -webkit-transform: translateZ(-10em) rotateX(0) rotateY(0deg); transform: translateZ(-10em) rotateX(0) rotateY(0deg); } to { -webkit-transform: translateZ(-10em) rotateX(360deg) rotateY(360deg); transform: translateZ(-10em) rotateX(360deg) rotateY(360deg); } } </style> </head> <body> <div id="window"> <div id="box"> <div class="face" id="face-front">1</div> <div class="face hide" id="face-left">2</div> <div class="face hide" id="face-top">3</div> <div class="face hide" id="face-right">4</div> <div class="face hide" id="face-bottom">5</div> <div class="face hide" id="face-back">6</div> </div> </div> X:<input id="changex" type="range" name="" min="-100" max="100" onchange="ratate()" /> <br> Y:<input id="changey" type="range" name="" min="-100" max="100" onmousemove="ratate()" /> <script> function ratate() { var x = document.getElementById('changex').value; var y = document.getElementById('changey').value; document.getElementById('window').style.webkitPerspectiveOrigin = x+"% "+y+"%"; } </script> </body> </html> -
- 会飞的龙猫
- 2017-02-22 15:23:28
background: -webkit-linear-gradient(left, rgba(54, 226, 248, 0.5) 0px, rgba(54, 226, 248, 0.5) 3px, rgba(0, 0, 0, 0) 0px), -webkit-linear-gradient(top, rgba(54, 226, 248, 0.5) 0px, rgba(54, 226, 248, 0.5) 3px, rgba(0, 0, 0, 0) 0px);
-webkit-background-size: 2.5em 2.5em;
这种设置背景颜色的方式没有见过，是什么意思呀？ -
- 北岛故事
- 2016-06-26 16:55:58
效果非常好，求私聊（请教大神53596192）
CSS3 3D 特效
使用CSS3当中的属性，创建真实可用的三维效果
78574 学习 · 425 问题
相似问题