<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style type="text/css">
*{margin: 0; padding: 0}
#main{width:300px; height: 300px; margin:50px auto; overflow: hidden; position:relative;word-break:break-all;}
#main div{ position: absolute; top:0; left: 0; transition:all 0.2s;}
.font{ z-index:2; background: orange;}
.back{ transform:rotateY(-90deg); background: yellow;}
#main:hover .font{transform:rotateY(90deg); }
#main:hover .back{transform:rotateY(0deg);-webkit-transition-delay:0.2s;}
</style>
</head>
<body>
<div id="main">
<div class="font">111111111111sdgdsgwqetqwetsdasgasdgeqwtqweasdgsdgdsgwqetqwetsdasgasdgeqwtqweasdgsdgdsgwqetqwetsdasgasdgeqwtqweasdgsdgdsgwqetqwetsdasgasdgeqwtqweasdgsdgdsgwqetqwetsdasgasdgeqwtqweasdgsdgdsgwqetqwetsdasgasdgeqwtqweasdgsdgdsgwqetqwetsdasgasdgeqwtqweasdgsdgdsgwqetqwetsdasgasdgeqwtqweasdgsdgdsgwqetqwetsdasgasdgeqwtqweasdgsdgdsgwqetqwetsdasgasdgeqwtqweasdgsdgdsgwqetqwetsdasgasdgeqwtqweasdgsdgdsgwqetqwetsdasgasdgeqwtqweasdgsdgdsgwqetqwetsdasgasdgeqwtqweasdgsdgdsgwqetqwetsdasgasdgeqwtqweasdgsdgdsgwqetqwetsdasgasdgeqwtqweasdgsdgdsgwqetqwetsdasgasdgeqwtqweasdgsdgdsgwqetqwetsdasgasdgeqwtqweasdgsdgdsgwqetqwetsdasgasdgeqwtqweasdgsdgdsgwqetqwetsdasgasdgeqwtqweasdgsdgdsgwqetqwetsdasgasdgeqwtqweasdgsdgdsgwqetqwetsdasgasdgeqwtqweasdgsdgdsgwqetqwetsdasgasdgeqwtqweasdgsdgdsgwqetqwetsdasgasdgeqwtqweasdgsdgdsgwqetqwetsdasgasdgeqwtqweasdgsdgdsgwqetqwetsdasgasdgeqwtqweasdgsdgdsgwqetqwetsdasgasdgeqwtqweasdg1111111111111111111111111111</div>
<div class="back">22222222222222sdgdsgwqetqwetsdasgasdgeqwtqweasdgsdgdsgwqetqwetsdasgasdgeqwtqweasdgsdgdsgwqetqwetsdasgasdgeqwtqweasdgsdgdsgwqetqwetsdasgasdgeqwtqweasdgsdgdsgwqetqwetsdasgasdgeqwtqweasdgsdgdsgwqetqwetsdasgasdgeqwtqweasdgsdgdsgwqetqwetsdasgasdgeqwtqweasdgsdgdsgwqetqwetsdasgasdgeqwtqweasdgsdgdsgwqetqwetsdasgasdgeqwtqweasdgsdgdsgwqetqwetsdasgasdgeqwtqweasdgsdgdsgwqetqwetsdasgasdgeqwtqweasdgsdgdsgwqetqwetsdasgasdgeqwtqweasdgsdgdsgwqetqwetsdasgasdgeqwtqweasdgsdgdsgwqetqwetsdasgasdgeqwtqweasdgsdgdsgwqetqwetsdasgasdgeqwtqweasdgsdgdsgwqetqwetsdasgasdgeqwtqweasdgsdgdsgwqetqwetsdasgasdgeqwtqweasdgsdgdsgwqetqwetsdasgasdgeqwtqweasdgsdgdsgwqetqwetsdasgasdgeqwtqweasdgsdgdsgwqetqwetsdasgasdgeqwtqweasdgsdgdsgwqetqwetsdasgasdgeqwtqweasdgsdgdsgwqetqwetsdasgasdgeqwtqweasdgsdgdsgwqetqwetsdasgasdgeqwtqweasdgsdgdsgwqetqwetsdasgasdgeqwtqweasdgsdgdsgwqetqwetsdasgasdgeqwtqweasdgsdgdsgwqetqwetsdasgasdgeqwtqweasdgsdgdsgwqetqwetsdasgasdgeqwtqweasdgsdgdsgwqetqwetsdasgasdgeqwtqweasdgsdgdsgwqetqwetsdasgasdgeqwtqweasdgsdgdsgwqetqwetsdasgasdgeqwtqweasdgsdgdsgwqetqwetsdasgasdgeqwtqweasdgsdgdsgwqetqwetsdasgasdgeqwtqweasdgsdgdsgwqetqwetsdasgasdgeqwtqweasdgsdgdsgwqetqwetsdasgasdgeqwtqweasdgsdgdsgwqetqwetsdasgasdgeqwtqweasdgsdgdsgwqetqwetsdasgasdgeqwtqweasdgsdgdsgwqetqwetsdasgasdgeqwtqweasdgsdgdsgwqetqwetsdasgasdgeqwtqweasdgsdgdsgwqetqwetsdasgasdgeqwtqweasdgsdgdsgwqetqwetsdasgasdgeqwtqweasdgasgasdgdsgwqetqwetsdasgasdgeqwtqweasdgsdgdsg</div>
</div>
</body>
</html>
思路:
在hover之前
得让back也旋转一个度数,
然后在hover的时候,back将度数改为0,给一个延迟的transition-delay时间,front也给一个旋转度数
这样才有旋转的效果