使用webkit transform应用css类在Safari或Chrome中不起作用 [英] Applying css class with webkit transform does not work in Safari or Chrome

问题描述

我要应用此css类：

  .turn90 {
 -moz-transform：rotate（90deg ）; / * FF3.5 + * / 
 -o-transform：rotate（90deg）; / * Opera 10.5 * / 
 -webkit-transform：rotate（90deg）; / * Saf3.1 +，Chrome * / 
 filter：progid：DXImageTransform.Microsoft.BasicImage（rotation = 1）; / * IE6，IE7 * / 
 -ms-filter：progid：DXImageTransform.Microsoft.BasicImage（rotation = 1）; / * IE8 * / 
} 
  

通过：

  document.getElementById（advancedsearchtoggle）。className + =turn90; 
  

它在Firefox和Opera中有效，但在Safari或Chrome中不能使用。 （尚未尝试IE）

我做错了什么？

谢谢！ >

Paul

完整的JavaScript功能：

  var expanded = 0; 
 function searchparts（n）
 {
 if（expanded == 0）{
 document.getElementById（'search2'）。style.visibility ='visible'; 
 document.getElementById（'search3'）。style.visibility ='visible'; 
 document.getElementById（'search2'）。style.display ='block'; 
 document.getElementById（'search3'）。style.display ='block'; 
 //window.scrollTo (0,findPos(document.getElementById('search'+n))-60）; 
 document.getElementById（advancedsearchtoggle）。className + =turn90; 
 document.getElementById（'advancedsearchtoggle'）。style [' -  webkit-transform'] ='rotate（90deg）'; 
 
 expanded = 1; 
} else if（expanded == 1）{
 document.getElementById（'search2'）。style.visibility ='collapse'; 
 document.getElementById（'search3'）。style.visibility ='collapse'; 
 document.getElementById（'search2'）style.display ='none'; 
 document.getElementById（'search3'）。style.display ='none'; 
 window.scrollTo（0，findPos（document.getElementById（'search1'）） -  60）; 
 document.getElementById（advancedsearchtoggle）。className =; 
 document.getElementById（'advancedsearchtoggle'）。style.webkitTransform ='rotate（-90deg）'; 
 
 expanded = 0; 
} 
} 
  

这是触发javascript的HTML：

 < a class =plainonclick =searchparts（2）; style =margin-right：20px;>< span style =text-decoration：underline;> Erweiterte Suche< / span> < span id =advancedsearchtogglestyle =text-decoration：none;>& raquo;< / span>< / a> 
  

正如你所看到的，即使放置

  document.getElementById（'advancedsearchtoggle'）。style [' -  webkit-transform'] ='rotate（90deg）'; 
  

直接写入javascript，它不工作。当我检查advancedsearchtoggle，我可以看到类get正确应用（和任何其他CSS我放入类）。只是旋转似乎不工作在Safari& Chrome。

谢谢！

解决方案

t支持旋转， span>标签。记住，供应商前缀CSS被称为实验性的原因。

它似乎支持旋转在像div，p或h1的标签，但我注意到当我第一次尝试这样做，符号消失了，因为你需要定义一个足够大的高度和宽度，以便旋转的元素将适合里面。

例如，将span标记更改为：

 < p id =advancedsearchtogglestyle =width：10px; height：10px; text-decoration：none;>& raquo;< / p> 
  

这在某种程度上起作用，但如果你不知道

您可能可以找到另一个在Webkit中正确旋转的HTML文本标签，或者使用一些javascript来确定您需要的文本的高度和宽度要旋转...

I'm applying this css class:

.turn90{
-moz-transform: rotate(90deg);  /* FF3.5+ */
-o-transform: rotate(90deg);  /* Opera 10.5 */
-webkit-transform: rotate(90deg);  /* Saf3.1+, Chrome */
filter:  progid:DXImageTransform.Microsoft.BasicImage(rotation=1);  /* IE6,IE7 */
-ms-filter: "progid:DXImageTransform.Microsoft.BasicImage(rotation=1)"; /* IE8 */
}

via:

document.getElementById("advancedsearchtoggle").className += " turn90"; 

It works sufficiently in Firefox and Opera, but not in Safari or Chrome. (Haven't tried IE yet)

What am I doing wrong?

Thank you!

Paul

The Complete Javascript function:

        var expanded=0;
    function searchparts(n)
    {
        if(expanded == 0){
            document.getElementById('search2').style.visibility = 'visible'; 
            document.getElementById('search3').style.visibility = 'visible'; 
            document.getElementById('search2').style.display = 'block'; 
            document.getElementById('search3').style.display = 'block'; 
            //window.scrollTo(0,findPos(document.getElementById('search'+n))-60);
            document.getElementById("advancedsearchtoggle").className += " turn90"; 
            document.getElementById('advancedsearchtoggle').style['-webkit-transform'] = 'rotate(90deg)';

            expanded = 1;   
        }else if(expanded == 1){
            document.getElementById('search2').style.visibility = 'collapse'; 
            document.getElementById('search3').style.visibility = 'collapse'; 
            document.getElementById('search2').style.display = 'none'; 
            document.getElementById('search3').style.display = 'none';
            window.scrollTo(0,findPos(document.getElementById('search1'))-60);
            document.getElementById("advancedsearchtoggle").className = " ";    
            document.getElementById('advancedsearchtoggle').style.webkitTransform = 'rotate(-90deg)'; 

            expanded = 0;   
        }
    }

This is the HTML that triggers the javascript:

<a class="plain" onclick="searchparts(2);" style="margin-right:20px;"><span style="text-decoration:underline;">Erweiterte Suche</span> <span id="advancedsearchtoggle" style="text-decoration:none;">&raquo;</span></a>

As you can see, even when putting

document.getElementById('advancedsearchtoggle').style['-webkit-transform'] = 'rotate(90deg)';

directly into the javascript, it doesn't work. When I inspect the "advancedsearchtoggle", i can see that the class get's applied correctly (and any other css I put into the class). Just the rotate doesn't seem to work in Safari & Chrome.

Thanks!

解决方案

I think Webkit just doesn't support rotation on < span > tags yet. Remember, vendor-prefix CSS are called "experimental" for a reason.

It does seem to support rotation on tags like div, p, or h1, but I noticed that when I first tried doing this, the symbol disappeared because you need to define a height and width large enough so that the rotated element will fit inside.

For example, you can change the span tag to this:

<p id="advancedsearchtoggle" style="width: 10px; height: 10px; text-decoration:none;">&raquo;</p>

which works to some extent, but it may be unpredictable if you don't know the dimensions of the text being rotated.

You might be able to find another HTML text tag that rotates properly in Webkit, or do some javascript to determine the height and width of the text you need to rotate...

这篇关于使用webkit transform应用css类在Safari或Chrome中不起作用的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！