* { margin:0; padding:0; } html,body { height:100%; overflow:hidden; } #wrap { position:absolute; left:0; top:0; right:0; bottom:0; margin:auto; width:300px; height:300px; /*border:1px solid; */ perspective:1000px; } #wrap > .box { position:absolute; left:0; top:0; right:0; bottom:0; margin:auto; width:300px; height:300px; transition:10s transform; transform-style:preserve-3d; /*transform-origin:center center -28.867513459481287px; */ } #wrap > .box > div { position:absolute; width:300px; height:300px; background:pink; text-align:center; font:50px/300px "微软雅黑"; /*transform-origin:center center -28.867513459481287px; */ backface-visibility:hidden; } #wrap:hover > .box { transform:rotateY(360DEG); }