专栏首页web秀CSS3实现3D水晶立方体效果

CSS3实现3D水晶立方体效果

前言

前段时间写过一篇《CSS3实现美美哒的图片倒影效果》,里面最后一步,“我们使倒影倾斜一个角度,让整个倒影效果更具有立体效果”,不知道大家有没有联想到用倾斜,我们可以制作一个立方体呢???

今天我们就来用纯css制作一个立方体,主要用到的知识就是transform: rotate,没有了解的可以点击下方文章了解: 《CSS3中transition、transform傻傻分不清楚》

效果预览图:

解析

立方体,是由6个面组成的,所以我们主要是操作6个面,组合成一个立方体就可以实现。

观察者方向的为z轴的正值方向

rotateX 3D空间旋转指定的角度,沿着垂直于X轴的方向顺时针旋转。 rotateY 3D空间旋转指定的角度,沿着垂直于Y轴的方向顺时针旋转。 rotateZ 3D空间旋转指定的角度,沿着垂直于Z轴的方向顺时针旋转。

第一步 - 画出前后2个面

<div class="wrap">
    <div class="cube">
        <div class="before"></div>
        <div class="after"></div>
    </div>
</div>

下面的样式,我们对整个盒子沿着垂直于X轴的方向逆时针旋转30°,Y轴逆时针旋转80°,前面元素Z轴位移100px, 后面元素Z轴位移-100px,并Y轴顺时针旋转180°。让效果看起来更明晰,有错位立体感。

/*最外层容器样式*/
.wrap{
  width: 200px;
  height: 200px;
  margin: 150px auto;
  position: relative;

}
/*包裹所有容器样式*/
.cube{
  width: 200px;
  height: 200px;
  margin: 0 auto;
  /*preserve-3d 使其子元素具有3D效果*/
  transform-style: preserve-3d;
  transform: rotateX(-30deg) rotateY(-80deg);
}

.cube div{
  position: absolute;
  width: 200px;
  height: 200px;
  opacity: 0.8;
}
.cube .before{
  transform: rotateY(0deg) translateZ(100px);
  background: red;
}
.cube .after{
  transform: translateZ(-100px) rotateY(180deg);
  background: blue;
}

第二步 - 画出左右2个面

和第一步类似,同样旋转和位移这两个面,使其能够完美拼接

<div class="wrap">
    <div class="cube">
        <div class="before"></div>
        <div class="after"></div>
        <div class="right"></div>
        <div class="left"></div>
    </div>
</div>

添加样式

.cube .left{
  transform: rotateY(90deg) translateZ(100px);
  background: green;
}
.cube .right{
  transform: rotateY(-90deg) translateZ(100px);
  background: yellow;
}

第三步 - 画出上下2个面

依次类推,完成上下2个面。

<div class="wrap">
    <div class="cube">
        <div class="before"></div>
        <div class="after"></div>
        <div class="right"></div>
        <div class="left"></div>
        <div class="top"></div>
        <div class="bottom"></div>
    </div>
</div>

添加样式

.cube .top{
  transform: rotateX(90deg) translateZ(100px);
  background: purple;
}
.cube .bottom{
  transform: rotateX(-90deg) translateZ(100px);
  background: pink;
}

第四步 - 美化

我们给每个面添加一个背景图片,然后让整个盒子旋转起来,使我们可以看到每个面的内容。

<div class="wrap">
    <div class="cube">
        <div class="before">
            <img src="../images/20180801122834.png" class="pic" />
        </div>
        <div class="after">
            <img src="../images/20180911140432.png" class="pic" />
        </div>
        <div class="right">
            <img src="../images/20181025165730.png" class="pic" />
        </div>
        <div class="left">
            <img src="../images/20181026153658.png" class="pic" />
        </div>
        <div class="top">
            <img src="../images/20180911175248.png" class="pic" />
        </div>
        <div class="bottom">
            <img src="../images/20180801121251.png" class="pic" />
        </div>
    </div>
</div>

添加样式

.pic{
  width: 200px;
  height: 200px;
}
@-webkit-keyframes rotate{
  from{
    transform: rotateX(0deg) rotateY(0deg);
  }
  to{
    transform: rotateX(360deg) rotateY(360deg);
  }
}
.cube{
  width: 200px;
  height: 200px;
  margin: 0 auto;
  transform-style: preserve-3d;
  transform: rotateX(-30deg) rotateY(-80deg);
  -webkit-animation: rotate 20s infinite;
  animation-timing-function: linear;
}

最终效果图:

演示地址:CSS3实现3D水晶立方体效果

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • 纯CSS3实现loading虚影加载效果

    从效果而言,我们主要实现下列步骤: 1、让一个圆旋转,并且是先快后慢; 2、有颜色过渡效果、并且有透明度; 3、然后就是复制上面的效果,5个,然后按时间执...

    Javanx
  • 3种纯CSS方式实现Tab 切换

    Tab 切换是种很常见的网页呈现形式,不管是PC或者H5都会经常看到,今天就为小伙伴们提供多种纯CSS Tab 切换的实现方式,同时对比一下那种代码更方便,更通...

    Javanx
  • React / Vue 项目时为什么要在列表组件中写 key,其作用是什么?

    在交叉对比中,当新节点跟旧节点头尾交叉对比没有结果时,会根据新节点的key去对比旧节点数组中的key,从而找到相应旧节点(这里对应的是一个key => inde...

    Javanx
  • CSS动效集锦,视觉魔法的碰撞与融合(三)

    在一些杀毒或文件扫描类的软件上,我们可能会看到一些雷达扫描的UI样式,例如下图所示

    外婆的彭湖湾
  • CSS3 3D转换

      x轴:水平向右 注意: x 右边是正值,左边是负值   y轴:垂直向下 注意: y 下面是正值,上面是负值   z轴:垂直屏幕 ...

    梨涡浅笑
  • 纯CSS制作多扇区饼图和环形图

    近期在做一个小程序的时候,需要显示重要位置显示几个饼图。遇到这种情况,第一想法就是上网搜索各种小程序支持的图表控件。最终也选择了小程序版本的EChart...

    无忧无忌
  • H5C3综合案例

      1>给body添加 透视效果 perspective: 1000px;   2>给section 添加 大小,一定不要忘记添加 3d呈现效果控制里面的6个...

    梨涡浅笑
  • Laravel展示产品-CRUD之show

      上一篇讲了Laravel创建产品-CRUD之Create and Store,现在我们来做产品展示模块,用到是show,①首先我们先修改controller...

    ytkah
  • 2045: 双亲数

    2045: 双亲数 Time Limit: 10 Sec  Memory Limit: 259 MB Submit: 659  Solved: 302 [Sub...

    HansBug
  • 老雷PHP全栈开发教程之常用html标签

    老雷PHP全栈开发

扫码关注云+社区

领取腾讯云代金券