* { padding:0; margin:0; } body,html { display:flex; justify-content:center; align-items:center; height:100%; } .wrap { width:200px; height:200px; perspective:500px; } .box { background:#abb9c5; width:100%; height:100%; transition:all 1s; transform-style:preserve-3d; position:relative; } .wrap:hover .box { transform:rotateY(180deg); } .font,.back { position:absolute; top:0; left:0; width:100%; height:100%; text-align:center; line-height:200px; backface-visibility:hidden; } .back { transform:rotateY(180deg); }
更新时间:2022-12-30 10:42:06