旋转的3D盒子
2016-10-25 14:07
375 查看
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> .camera { width: 200px; height: 200px; perspective-origin: center; perspective: 200px; } .box { transform-style:preserve-3d; position:relative; width:100%; height:100%; border:1px dashed #000; } .face { width: 100px; height: 100px; background: red; display: flex; align-items: center; justify-content: center; font-size: 38px; color: white; position: absolute; } .face1 { background: #3498db; transform:translateX(50px) translateY(150px) translateZ(50px); } .face2 { background: #9b59b6; transform: translateX(100%) translateY(50px) translateZ(0px) rotateY(-90deg);; } .face3 { background: #f1c40f; transform-origin: 0 0; transform:translateX(50px) translateY(50px) translateZ(50px) rotateX(-90deg); } .face4 { background: #7f8c8d; transform-origin: 0 0; transform:translateX(50px) translateY(150px) translateZ(50px) rotateX(-90deg); } .face5 { background: #2ecc71; transform-origin: 100% 100%; transform: translateX(-50%) translateY(50px) translateZ(50px) rotateY(-90deg); } .face6 { background: #34495e; transform: translateX(50px) translateY(50px) translateZ(-50px) rotateY(-180deg); } .box { animation: rotate 4s linear infinite ; } @keyframes rotate{ 0%{ -webkit-transform:rotateY(0) rotateX(0); } 50%{ -webkit-transform:rotateY(-359.9deg) rotateX(0); } 100% { -webkit-transform:rotateY(-359.9deg) rotateX(-359.9deg); } } </style> <script> var box = document.querySelectorAll('.box'); window.addEventListener('deviceorientation', function(event) { var alpha = event.alpha, beta = event.beta, gamma = event.gamma; box[0].style.webkitTransform = 'rotateX(' + beta + 'deg) rotateY(' + gamma + 'deg) rotateZ(' + alpha + 'deg)'; box[0].style.transform = 'rotateX(' + beta + 'deg) rotateY(' + gamma + 'deg) rotateZ(' + alpha + 'deg)'; box[0].style.mozTransform = 'rotateX(' + beta + 'deg) rotateY(' + gamma + 'deg) rotateZ(' + alpha + 'deg)'; }, false); </script> </head> <body> <div class='camera'> <div class='box'> <div class="face face1">1</div> <div class="face face2">2</div> <div class="face face3">3</div> <div class="face face4">4</div> <div class="face face5">5</div> <div class="face face6">6</div> </div> </div> </body> </html>
相关文章推荐
- 3D盒子旋转
- 纯css样式实现盒子 3D 旋转、鼠标悬停效果
- 3D盒子旋转
- 3d动画盒子旋转
- Android酷炫动画效果之3D星体旋转效果
- Android编程实现3D滑动旋转效果的方法
- WPF 3D:简单的Point3D和Vector3D动画创造一个旋转的正方体
- 2D、3D旋转矩阵
- 制作3D旋转导航综合练习题
- Directx 3D编程实例:随机绘制的立体图案旋转
- css3相册图片3D旋转展示特效
- Android编程实现3D旋转效果实例
- [Unity3d]3D车展之汽车开门关门和旋转缩放的效果的实现
- 实现3D立体旋转效果(流畅)
- [OpenGL ES 04]3D变换实践篇:平移,旋转,缩放
- CSS 3D旋转 hover 后设置transform 是相对于正常位置
- 【附源码】【Android 3D OpenGL】开发之二——旋转的三角形【MacroCheng原创】
- opengl 制作 3D 彩色旋转三角形
- 实现3D旋转(源码)
- Android 3D 旋转 木马 Carousel