Hey there, I need some assistance with a problem. I have to rotate these three hexagons slightly, about 15 degrees or so. The catch is, it needs to work in Internet Explorer only. I've been struggling with this all day and it's getting quite frustrating. Any help would be greatly appreciated. Thanks.
<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>