CSS3旋转跳跃的立方体

opspider 2018-07-18

实现3d效果旋转跳跃的立方体,CSS3中具有的perspective就是为了设置井深,创建一个3D的环境,而transform-style就是为了创建3d环境。

井深:指视觉与平面的距离,使具有三维位置变换的元素产生透视效果,就是我们理解的【Z轴】。 从视觉上观察,值越大看起来距自己越近,元素整体越大;值越小,越远,元素整体越小。在设计中给需要3D的盒子的父级设置井深,让其具有立体透视效果 ,通常perspective使用的值800px或者1200px ,这两个值从视觉上看比较舒服,也可以根据需求自行设置。

首先,需要创建一个大盒子div将立方体包裹起来,以便在css样式中固定六个面的位置:


  1. <div class="wrap">
  2. <div class="cube">
  3. <div class="front">前</div>
  4. <div class="back">后</div>
  5. <div class="left">左</div>
  6. <div class="right">右</div>
  7. <div class="top">上</div>
  8. <div class="bottom">下</div>
  9. </div>
  10. </div>

在CSS中添加相关的样式如下:


  1. * {
  2. padding: 0px;
  3. margin: 0px;
  4. }
  5. .wrap{
  6. margin-top: 200px;
  7. margin-left: 500px;
  8. /*设置井深、透视*/
  9. perspective: 800px;
  10. /*视觉来源,透视效果*/
  11. perspective-origin: 50% 100px;
  12. }
  13. .cube{
  14. position: relative;
  15. width: 200px;
  16. /*创建3d环境*/
  17. transform-style: preserve-3d;
  18. }
  19. .cube div{
  20. position: absolute;
  21. width: 200px;
  22. height: 200px;
  23. /*添加内阴影*/
  24. box-shadow: 5px 5px 50px plum inset;
  25. border: 1px gainsboro solid;
  26. }
  27. /*旋转设置立方体的六个面*/
  28. .front {
  29. transform: translateZ(100px);
  30. }
  31. .back {
  32. transform: translateZ(-100px) rotateY(180deg);
  33. }
  34. .right {
  35. transform: rotateY(-270deg) translateX(100px);
  36. /*改变元素位置*/
  37. transform-origin: top right;
  38. }
  39. .left {
  40. transform: rotateY(270deg) translateX(-100px);
  41. transform-origin: center left;
  42. }
  43. .top {
  44. transform: rotateX(-90deg) translateY(-100px);
  45. transform-origin: top center;
  46. }
  47. .bottom {
  48. transform: rotateX(90deg) translateY(100px);
  49. transform-origin: bottom center;
  50. }

演示静态效果:

CSS3旋转跳跃的立方体

在CSS样式中添加动态效果:


  1. /*帧动画,旋转角度*/
  2. @keyframes spin {
  3. from { transform:rotateX(0) rotateY(0) rotateZ(0) ; }
  4. to { transform: rotateX(360deg) rotateY(360deg) rotateZ(360deg); }
  5. }
  6. /*旋转速度*/
  7. .cube {
  8. animation: spin 10s infinite linear;
  9. }

CSS3旋转跳跃的立方体

相关推荐