CSS 3D炫酷的 旋转魔方

来源:转载

最近在复习HTML 和 CSS,把以前做的一些小例子拿出来分享一下,也加深自己的印象

css 是通过 transform 来实现3D旋转的,看代码之前,先复习一下相关知识

  • transform-origin 规定了转换的中心点 ,定义场景,也就是灭点,2D 转换可以设置 x轴和y轴,3D转换还能设置 z轴 语法:transform-origin: x-axis y-axis z-axis;
  • transform-style 属性规定如何在 3D 空间中呈现被嵌套的元素。flat 子元素将不保留其 3D 位置。preserve-3d 子元素将保留其 3D 位置。
  • perspective 定义 3D 元素距视图的距离
  • perspective-origin 定义透视方位,相当于从上下左右那个方向透视,语法 perspective-origin: x-axis y-axis;

3D旋转魔方用到了
perspective 给魔方一个透视的距离
transform-style 保留每一个魔方每个面的3D位置
transform-origin 每个魔方面旋转的的基点位置,和整个魔方旋转的基点位置
transform: translate3d(x,y,z) 3D转换

<!DOCTYPE html><html lang="en"> <head> <title>CSS 3D魔方</title> <meta charset="utf-8"> </head> <style> .bigbox{ perspective: 500px; /* 定义场景,灭点为500 */ } .box{ margin: 0 auto; margin-top: 200px; width: 200px; height: 200px; background: red; position: relative; transition: all 2s ease; transform-style: preserve-3d; transform-origin: center center 100px; } .box:hover{ transform: rotateX(360deg)rotateY(360deg); } .box div{ width: 200px; height: 200px; position: absolute; bottom: 0; right: 0; font-size: 50px; text-align: center; line-height: 200px; } /* top */ .box div:nth-child(1){ top: -200px; background: rgba(255, 0, 0, 0.5); transform-origin: bottom; transform: rotateX(-90deg) } /* bottom */ .box div:nth-child(2){ top: 200px; background: rgba(0, 255, 0, 0.5); transform-origin: top; transform: rotateX(90deg) } /* right */ .box div:nth-child(3){ right: -200px; background: rgba(0, 0, 255, 0.5); transform-origin: left; transform: rotateY(-90deg) } /* left */ .box div:nth-child(4){ left: -200px; background: rgba(255, 255, 0, 0.5); transform-origin: right; transform: rotateY(90deg) } .box div:nth-child(5){ background: rgba(255, 0, 255, 0.5); transform: translate3d(0, 0, 200px); } .box div:nth-child(5){ background: rgba(0, 255, 555, 0.5); transform: translate3d(0, 0, 200px); } </style> <body> <div class="bigbox"> <div class="box"> <div>01</div> <div>02</div> <div>03</div> <div>04</div> <div>05</div> <div>06</div> </div> </div> </body></html>

代码跑一遍,哇塞,想必第一次见到这种效果 ,想来段freestyle

分享给朋友:
您可能感兴趣的文章:
随机阅读: