html - 如何旋转这些六 Angular 形？

嗨，我只是想知道有人能帮我解决这个问题，我必须稍微旋转这三个六角形。大约15度左右。它只能在Internet Explorer中工作。我整天都在撞我的头，这实在令人沮丧。
谢谢。

<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>

最佳答案

这是资源管理器中转换的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/