给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都会在浏览器上水平居中: