如何用CSS3画出懂你的3D魔方?

本文由@IT·平头哥联盟-首席填坑官(苏南)分享,公众号:honeyBadger8

作者:首席填坑官∙苏南
交流群:912594095、公众号:honeyBadger8,本文原创,著作权归作者所有,转载请注明原链接及出处。

前言

最近在写《每周动画点点系列》文章,上一期分享了< 手把手教你如何绘制一辆会跑车 >,本期给大家带来是结合CSS3画出来的一个立体3d魔方,结合了js让你随心所欲想怎么转,就怎么转,这里是 @IT·平头哥联盟,我是首席填坑官苏南(South·Su),我们先来看看效果,然后再分解它的实现过程吧

本文由@IT·平头哥联盟-首席填坑官∙苏南分享,公众号:honeyBadger8

绘制过程:

好吧,gif图看着好像有点不是很清晰,想在线预览的同学,可点击在线预览 ?,废话不多扯了,先来分析一下,看如何实现这个功能吧。

∙ API预热 :
  • 本次示例是一个立体的正方形,既然有立体效果,肯定少不了CSS3中的 -webkit-perspective-透视、preserve-3d-三维空间,这个两个是重点哦,当然还有transform-origintransitiontransform等,先来回故一下 API 怎么是讲的吧:

perspective 取值 :

  • none :不指定透视 ;
  • length :指定观察者与「z=0」平面的距离,使具有三维位置变换的元素产生透视效果。「z>0」的三维元素比正常大,而「z<0」时则比正常小,大小程度由该属性的值决定,不允许负值。

transform-style 取值

  • flat :指定子元素位于此元素所在平面内;
  • preserve-3d :指定子元素定位在三维空间内,当该属性值为 preserve-3d时,元素将会创建局部堆叠上下文;

小结 :决定一个变换元素看起来是处在三维空间还是平面内,需要该元素的父元素上定义 <’ transform-style '> 属性,也就是说想某元素有三维效果,需要设定它的父级有 preserve-3d

transform-origin 取值

  • percentage:用百分比指定坐标值。可以为负值;
  • length:用长度值指定坐标值。可以为负值;
  • left:指定原点的横坐标为left;
  • center①:指定原点的横坐标为center;
  • right:指定原点的横坐标为right;
  • top:指定原点的纵坐标为top;
  • center②:指定原点的纵坐标为center;
  • bottom:指定原点的纵坐标为bottom;

transform、transition等,就不介绍了

/* perspective 使用示例:*/
div{
   
  -webkit-perspective:600px;
  perspective:600px;
}

/*transform-style 使用示例:*/
.preserve{
   
  transform-style:preserve-3d;
  -webkit-transform-style:preserve-3d;
}

  /*transform-origin 使用示例:*/
.preserve{
   
  -webkit-transform-origin:50% 50% -100px; or 
  -webkit-transform-origin:bottom; or
  -webkit-transform-origin:top;
  …………
}
  

∙ 绘制6个面 :
  • 是的,我没有说错,就是6个面:上、正面、下、背面、左、右,
  • 上面API讲了这么多,来实践试一下吧,写6个div,结构大概是这样的,也是接下来的魔方需要的结构:

<div class="cube">
    <div class="cube-inner running">
        <p class="single-side s1"><span></span></p>
        <p class="single-side s2"><span></span></p>
        <p class="single-side s3"><span></span></p>
        <p class="single-side s4"><span></span></p>
        <p class="single-side s5"><span>
  • 0
    点赞
  • 4
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值