Css 旋转帧，但不旋转图像_Css_Web_Transform

Css 旋转帧，但不旋转图像

css web

Css 旋转帧，但不旋转图像,css,web,transform,Css,Web,Transform,我想旋转一个帧，但不旋转其中的图像。这是一个JSFIDLE，它进行旋转，但图像仍在移动。如何保持图像静止，但仅移动帧 HTML: 1） PNG伪掩模覆盖我创建了一个简单的HTML/CSS解决方案，但只有满足以下三个条件：图像后面的背景色是纯色图像的所有侧面都有足够的边距你有Photoshop或类似的图像编辑软件工作示例正文{ 背景色：#22222； } 十六进制黑客{ 位置：相对位置；排名：0；左：0； } .基本图像{ 位置：相对位置；排名：0；左：0； z指数：1；

我想旋转一个帧，但不旋转其中的图像。这是一个JSFIDLE，它进行旋转，但图像仍在移动。如何保持图像静止，但仅移动帧

HTML:

1） PNG伪掩模覆盖我创建了一个简单的HTML/CSS解决方案，但只有满足以下三个条件：

图像后面的背景色是纯色

图像的所有侧面都有足够的边距

你有Photoshop或类似的图像编辑软件

工作示例

正文{
背景色：#22222；
}
十六进制黑客{
位置：相对位置；
排名：0；
左：0；
}
.基本图像{
位置：相对位置；
排名：0；
左：0；
z指数：1；
利润率：84px；
}
.六角覆盖层{
位置：绝对位置；
宽度：568px；
高度：568px；
顶部：0px；
左：0px；
z指数：3；
-moz转换：所有1都易于输入输出；
-webkit转换：所有1都易于输入输出；
-o型转换：所有1均易于输入输出；
过渡：所有1都易于输入输出；
}
.hex覆盖：悬停{
-ms变换：旋转（30度）；/*IE 9*/
-webkit变换：旋转（30度）；/*铬合金、Safari、Opera*/
变换：旋转（30度）；
}

谢谢。有没有哪种解决方案可以在稍旧的浏览器上使用？@EddieS我已经更新了我的答案，为您提供了另外两种选择。

<body>
<div class="center">
<div class="hexagon">
<div class="hexagon-in1">
<div class="hexagon-in2">

</div></div>
</div>
</div>

</body>

.center{
  width: 200px;
  margin: auto;
  margin-top: -50px;
}
.hexagon{
  width: 200px;
  height: 400px;
  overflow: hidden;
  visibility: hidden;
  transform: rotate(120deg);
  cursor: pointer;
  -moz-transition: all 1s ease-in-out;
  -webkit-transition: all 1s ease-in-out;
  -o-transition: all 1s ease-in-out;
  transition: all 1s ease-in-out;
}
.hexagon-in1{
  overflow: hidden;
  width: 100%;
  height: 100%;
  transform: rotate(-60deg);
}
.hexagon-in2{
  width: 100%;
  height: 100%;
  visibility: visible;
  transform: rotate(-60deg);  
  background: url('http://lorempixel.com/g/250/350/city');
  repeat: no-repeat;
  position: relative;

}  

.hexagon:hover{   
  -ms-transform: rotate(150deg); /* IE 9 */
   -webkit-transform: rotate(150deg); /* Chrome, Safari, Opera */
   transform: rotate(150deg);
}