Question

嗨，我只是想知道任何人都可以帮我解决这个问题，我必须稍微旋转这三个六边形。大约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>

Answer 1

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

我怎样才能旋转这些六边形？

1 个答案: