欢迎使用CSDN-markdown编辑器

来源：互联网发布：网络大电影商业模式编辑：程序博客网时间：2024/06/04 00:39

<!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也给一个旋转度数
这样才有旋转的效果

0 0