摘要:本篇教程讲解了CSS3如何实现旋转的盒子效果,希望阅读本篇文章以后大家有所收获,帮助大家HTML5+CSS3从入门到精通 。
html
<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>
camera用来控制景深(perspective)
box包裹立方体六个面
face1-6是立方体的六个面
css
.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(50px) translateZ(50px); }.face2 { background: #9b59b6; transform-origin: 0 0; //设置transform的基准点 transform:translateX(150px) translateY(50px) translateZ(50px) rotateY(90deg); }//transform是有顺序的,先旋转再平移和先平移再旋转的效果可能不同.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); }//做一个旋转的动画,看看6个面写的是否正确.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); } }
如果是手机观看的话,增加陀螺仪效果显得更nice
js
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);
本文由职坐标整理并发布,了解更多内容,请关注职坐标WEB前端HTML5/CSS3频道!
您输入的评论内容中包含违禁敏感词
我知道了
请输入正确的手机号码
请输入正确的验证码
您今天的短信下发次数太多了,明天再试试吧!
我们会在第一时间安排职业规划师联系您!
您也可以联系我们的职业规划师咨询:
版权所有 职坐标-一站式IT培训就业服务领导者 沪ICP备13042190号-4
上海海同信息科技有限公司 Copyright ©2015 www.zhizuobiao.com,All Rights Reserved.
沪公网安备 31011502005948号