关于一个transform的问题

老师，请问chrome是不支持transform中的rotate属性吗？我不知道这个为什么不能显示效果？代码如下：<!DOCTYPE html>
<html>
<head>
   <meta charset="UTF-8">
   <title>Transform</title>
   <style type="text/css">
       p{
           padding: 5px;
           border:medium double black;
           background-clip: lightgray;
           font-family: sans-serif;
       }
       #banana{
           font-size: x-large;
           border:medium solid black;
           color:white;
           background-color:green;
           padding:4px;
           /*-moz-transform:rotate(-45deg) scaleX(1.2);
           -moz-transform-origin:right top;*/
       }
       #banana:hover{
           -moz-transition-duration:1.5s;
           -moz-transform:rotate(360deg);
       }
   </style>
</head>
<body>
   <p id="friuttext">
       There are lots of different kinds of fruit-here are over 500 varities of<span id="banana">banana</span> alone.By the time we add the countless types of apples ,oranges,and other well-knownfruits,we are faced with thousands of chioces.
   </p>
   <script type="text/javascript">
       document.write("compatMode:"+document.compatMode);
   </script>
</body>
</html>

慕雪1434180 2017-11-25

源自：HTML5网页布局 1-1 html5页面布局概述

收起

2回答

怎么都被占用了呢回答被采纳获得+3积分 2017-11-27 09:39:14

你测试一下，我帮你完善的这个

<!DOCTYPE html>

<html>

<head>

<title>Transform</title>

padding: 5px;

border:medium double black;

background-clip: lightgray;

font-family: sans-serif;

}

#banana{

display: inline-block;

width:100px;

font-size: x-large;

border:medium solid black;

color:white;

background-color:green;

padding:4px;

/*-moz-transform:rotate(-45deg) scaleX(1.2);

-moz-transform-origin:right top;*/

}

#banana:hover{

-webkit-transition-duration:1.5s;

-webkit-transform:rotate(360deg);

}

</style>

</head>

<body>

There are lots of different kinds of fruit-here are over 500 varities of<span id="banana">banana</span> alone.By the time we add the countless types of apples ,oranges,and other well-knownfruits,we are faced with thousands of chioces.

</p>

document.write("compatMode:"+document.compatMode);

</script>

</body>

</html>

收起回答

慕雪1434180 提问者 #1

非常感谢！

2018-01-12 20:34:38

怎么都被占用了呢 2017-11-26 16:39:14

让span元素块状显示。而且-moz-是兼容Firefox浏览器的，兼容chrome是-webkit-哦

收起回答

提问者慕雪1434180 #1

老师，我给#banana设置display：block；将-moz-改为-webkit-之后，还是无法旋转？

2017-11-26 17:18:46
qq_怺芣訁棄_0 回复提问者慕雪1434180 #2

我刚才用你的代码试了下，可以xuan'zhu <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>Transform</title> <style type="text/css"> p{ padding: 5px; border:medium double black; background-clip: lightgray; font-family: sans-serif; } #banana{ display: inline-block; /*width:100px;*/ font-size: x-large; border:medium solid black; color:white; background-color:green; padding:4px; /*-moz-transform:rotate(-45deg) scaleX(1.2); -moz-transform-origin:right top;*/ } #banana:hover{ -webkit-transition-duration:1.5s; -webkit-transform:rotate(360deg); } </style> </head> <body> <p id="friuttext"> There are lots of different kinds of fruit-here are over 500 varities of<span id="banana">banana</span> alone.By the time we add the countless types of apples ,oranges,and other well-knownfruits,we are faced with thousands of chioces. </p> <script type="text/javascript"> document.write("compatMode:"+document.compatMode); </script> </body> </html>

2018-01-19 22:08:51