lxy

3个月前
  • 620

    浏览
  • 2

    评论
  • 0

    收藏

用css3简单的制作3d半透明立方体图片展示

本文作者:imweb lxy 原文出处:imweb社区 未经同意,禁止转载

以上是实图展示需要用到的主要元素: 1、perspective:定义 3D 元素距视图的距 2、transform:允许我们对元素进行旋转、缩放、移动或倾斜 3、transform-style:规定如何在 3D 空间中呈现被嵌套的元素 4、transition:定义过渡开始、完成的时间、速度和类型 简述:.cube代表一个正方体,.cube里面的每一个div分别表示正方体的一个面,要想每个面都有图片,即在每个div里分别加上一个img。正方体的制作很简单,只需要先让6个面处于同一位置,然后再绕不同的轴旋转一定的角度和平移一定距离即可。下面一起看实操:

div部分 css搭建舞台

css 六个面绕不同的轴旋转、平移组成正方体

下面是完整代码,以下代码中,之所以在.side中加position:absolute是为了让6个面处于同一位置 然后再从相同的点出发进行不同的旋转和平移

2 条评论