如何旋轉這些六邊形？

嗨，我只是想知道有誰能幫我解決這個問題，我不得不稍微旋轉這三個六邊形。大約15度左右。它只能在Internet Explorer中工作。我一整天都在b my我的頭，這很令人沮喪。謝謝。如何旋轉這些六邊形？

<html> 
<head> 

<style type="text/css"> 

    .top 
       { 
     height:0px; 
     width:0px; 
     display: block; 
     border:50px solid #606060; 
     border-top-color:transparent; 
     border-right-color:transparent; 
     border-bottom-color:#606060; 
     border-left-color:transparent; 
           //transform: rotate(30deg); 
    } 

    .middle 
       { 
     height: 50px; 
     background: #606060; 
     width: 100px; 
     display: block; 
           //transform: rotate(30deg); 
    } 

    .bottom 
       { 
     height:0px; 
     width:0px; 
     display: block; 
     border:50px solid #606060; 
     border-top-color:#606060; 
     border-right-color:transparent; 
     border-bottom-color:transparent; 
     border-left-color:transparent; 
           // transform: rotate(30deg); 

    } 

    .top2 
       { 
     height:0px; 
     width:0px; 
     display: block; 
     border:50px solid red; 
     border-top-color:transparent; 
     border-right-color:transparent; 
     border-bottom-color:red; 
     border-left-color:transparent; 
           //transform: rotate(30deg); 
    } 

    .middle2 
       { 
     height: 50px; 
     background: red; 
     width: 100px; 
     display: block; 
           //transform: rotate(30deg); 
    } 

    .bottom2 
       { 
     height:0px; 
     width:0px; 
     display: block; 
     border:50px solid red; 
     border-top-color:red; 
     border-right-color:transparent; 
     border-bottom-color:transparent; 
     border-left-color:transparent; 
           // transform: rotate(30deg); 

    } 

       .top3 
       { 
     height:0px; 
     width:0px; 
     display: block; 
     border:50px solid #C0C0C0; 
     border-top-color:transparent; 
     border-right-color:transparent; 
     border-bottom-color:#C0C0C0; 
     border-left-color:transparent; 
           //transform: rotate(30deg); 
    } 

    .middle3 
       { 
     height: 50px; 
     background: #C0C0C0; 
     width: 100px; 
     display: block; 
           //transform: rotate(30deg); 
    } 

    .bottom3 
       { 
     height:0px; 
     width:0px; 
     display: block; 
     border:50px solid #C0C0C0; 
     border-top-color:#C0C0C0; 
     border-right-color:transparent; 
     border-bottom-color:transparent; 
     border-left-color:transparent; 
           // transform: rotate(30deg); 

    } 



</style> 
</head> 
<body> 

<div class="hexagon"style="position: absolute; top: 0px; left: 10px;"> 
    <span class="top"></span> 
    <span class="middle"></span> 
    <span class="bottom"></span> 

</div> 
<!-- GREEN --> 
<div class="hexagon3" style="position: absolute; top: 110px; left: 65px;"> 
    <span class="top3"></span> 
    <span class="middle3"></span> 
    <span class="bottom3"></span> 

</div> 
<!-- black--> 
<div class="hexagon2" style="position: absolute; top: 0px; left: 120px;"> 
       <span class="top2"></span> 
    <span class="middle2"></span> 
    <span class="bottom2"></span> 

</div> 



</BODY 

</html>

來源

2012-07-12 user1521288

我討厭自己是那樣的人，但是這看起來可疑的類似：HTTP ：//stackoverflow.com/questions/11450967/creating-hexagons-in-css-html – thirtydot 2012-07-12 15:50:17

你看到什麼效果。如果您取消註釋轉換，那麼不會發生輪換？或者它看起來並不怎麼樣？ – OnResolve 2012-07-12 15:51:43

它似乎已經發布了關於它的一個小夥子。球。謝謝。 – user1521288 2012-07-12 15:52:13

這裏是在資源管理器中轉換的CSS：

filter: progid:DXImageTransform.Microsoft.Matrix(/* IE6–IE9 */ 
M11=0.9659258262890683, M12=-0.25881904510252074, M21=0.25881904510252074, M22=0.9659258262890683, sizingMethod='auto expand'); 
zoom: 1;

採取此頁面看看http://css3please.com/

來源

2012-07-12 15:51:38 ggonzalez

如何旋轉這些六邊形？

回答

相關問題