* { /*清除默认样式*/ margin:0; padding:0; list-style:none; border:0; } ul { /*设置大盒子的大小,背景颜色,居中*/ width:600px; background:#F90; color:#fff; margin:50px auto; } li { /*设置小盒子的大小,向左浮动,保存嵌套元素的3D空间 ,3D距离*/ width:150px; height:40px; transition:all 0.4s ease 0s; float:left; position:relative; transform-style:preserve-3d; perspective:6000px } li:hover { /*使他沿X轴逆旋转90度*/ transform:rotateX(-90deg); } span { /*设置盒子大小,行高,字体居中,绝对定位*/ width:150px; height:40px; line-height:40px; text-align:center; position:absolute; top:0; left:0; } li .no1 { background:#F60; transform:translateZ(20px); } li .no2 { background:#39F; transform:rotateX(90deg) translateZ(20px); }
更新时间:2021-06-22 01:12:01