纯CSS实现3D效果的立方体

html-css030

纯CSS实现3D效果的立方体,第1张

当使用css属性 perspective 的时候,需要一个容器并设置perspective depth值,然后让它的子元素在这个容器中做运动

给perspective设置深度值,这个值表示屏幕到元素所在环境最远距离

给立方体设置3D属性

给立方体的每个面设置绝对定位,长宽100%,然后设置背景为网格状。

对立方体的六个面进行Z轴的变换并且旋转,使它形成立方体的六个面

剩下最后一步就是让这个立方体旋转起来,设置无线循环的animation动画

实现效果如下

因为“text-align:center”控制的是文本居中,div居中可以用外边距margin来实现。

1、新建html文件,在body标签中添加div标签,div标签中的内容为“演示文本”,添加题目中的css样式,为了方便演示,给div标签添加灰色背景,这时可以发现div靠近浏览器的左侧,文字在div中居中:

2、为div标签添加新的外边距“margin”属性,属性值为“0 auto”,“0”指的是上下外边距为0,“auto”指的是左右外边距为自适应:

3、这时无论浏览器的宽度是多少,div都会在浏览器上水平居中: