用CSS完成立方体

这次使用空间转换来完成立体图形,需要用到定位,旋转,位移。

 

首先需要六个高宽200px的平面,每个颜色不一样。可以清除的看到六个平面是一种平铺的状态

 

 

给父元素设置相对定位,子元素设置绝对定位,这样六个平面压在一起。

 

 

这里div1,2,3,4是上下左右四个面,div1,2绕X轴旋转90度,并在Z轴分别移动-100px,100px。(注意这里需要连写,不然会出现错误,大家可以试一下,也不是错误就是不是我想要的结果,还有当元素旋转之后他的坐标轴也会发生变化,我刚开始以为旋转之后是Y轴上下,结果不是,平面的正对面始终都是Z轴),还有div3,4绕Y轴旋转90度,并在Z轴分别移动-100px,100px,移动之后图形还是没有变化,因为她还是2D的,需要一些手段才可以。最后div5,6也需要在Z轴上移动100px-100px,和刚才我说的那样2D平面正对着的就是Z轴方向。

 

接着需要在父元素中添加属性transform-style:perserve-3d,转换成3D效果,但是还是不行,因为电脑屏幕是2D的哈哈,我们给这个立体添加一个旋转就可以看出来了。

 

 

这里还可以边旋转边缩放,在这里我发现个问题,就是在标签里只能出现一个transform属性,如果需要实现两个效果就是连写,而3D只能旋转和缩放连起来。

 

posted @ 2022-07-29 16:04  漫步火星  阅读(90)  评论(0编辑  收藏  举报