html 代码 <!DOCTYPE <span class='wp_keywordlink_affiliate'><a href="https://www.rokub.com/category/html" title="html" target="_blank" data-wpel-link="internal" rel="noopener noreferrer">html</a></span>><br /> <<span class='wp_keywordlink_affiliate'><a href="https://www.rokub.com/category/html" title="html" target="_blank" data-wpel-link="internal" rel="noopener noreferrer">html</a></span>><br /> <head><br /> <meta charset="UTF-8"><br /> <title>test</title><br /> <!–<script type="text/javascript" src="http://apps.bdimg.com/libs/<span class='wp_keywordlink_affiliate'><a href="https://www.rokub.com/category/jquery" title="jquery" target="_blank" data-wpel-link="internal" rel="noopener noreferrer">jquery</a></span>/2.1.4/<span class='wp_keywordlink_affiliate'><a href="https://www.rokub.com/category/jquery" title="jquery" target="_blank" data-wpel-link="internal" rel="noopener noreferrer">jquery</a></span>.min.<span class='wp_keywordlink_affiliate'><a href="https://www.rokub.com/category/javascript" title="js" target="_blank" data-wpel-link="internal" rel="noopener noreferrer">js</a></span>"></script> –><br /> <!–鼠标经过向右移动100像素–></p> <p> </head><br /> <style><br /> .demo_box{<br /> border: 1px solid #3DA5DC;<br /> background: #a4dcf9;<br /> height: 100px;<br /> width: 200px;<br /> text-align: center;<br /> color: #fff;<br /> margin:50px 100px;</p> <p> }<br /> .perspective_none{<br /> position:relative;<br /> background:#4d6ea6;<br /> float:left;<br /> margin:50px;<br /> -webkit-animation:perspective_none 4s infinite linear;<br /> -moz-animation:perspective_none 4s infinite linear;<br /> }<br /> .perspective_value{<br /> position:relative;<br /> background:#4d6ea6;<br /> float:left;<br /> margin:50px;<br /> -webkit-animation:perspective_value 4s infinite linear;<br /> -moz-animation:perspective_value 4s infinite linear;<br /> }<br /> @-webkit-keyframes perspective_none{<br /> 0%{-webkit-transform:rotateY(0deg);}<br /> 50%{-webkit-transform:rotateY(180deg);}<br /> 100%{-webkit-transform:rotateY(360deg);}<br /> }<br /> @-moz-keyframes perspective_none{<br /> 0%{-moz-transform:rotateX(0deg);}<br /> 50%{-webkit-transform:rotateX(180deg);}<br /> 100%{-moz-transform:rotateX(360deg);}<br /> }<br /> @-webkit-keyframes perspective_value{<br /> 0%{-webkit-transform:perspective(500px) rotateX(0deg);}<br /> 100%{-webkit-transform:perspective(500px) rotateX(360deg);}<br /> }<br /> @-moz-keyframes perspective_value{<br /> 0%{-moz-transform:perspective(500px) rotateX(0deg);}<br /> 100%{-moz-transform:perspective(500px) rotateX(360deg);}<br /> }<br /> </style><br /> <body><br /> <div class="demo_box perspective_none">没有设置3D透视%</div><br /> <div class="demo_box perspective_value">透视为500px</div><br /> </body><br /> </html> » 本文来自：前端开发者 » 《二种透视效果，一种无一种有》 » 本文链接地址：https://www.rokub.com/9413.html » 您也可以订阅本站：https://www.rokub.com
前端开发者
评论前必须登录！
注册