Question

我有一个页面，其中包含可以缩放和旋转的图像。请在此处查看示例：http://jsfiddle.net/viniciuspaiva/38AzW/

我使用CSS转换，但旋转的按钮与应用缩放的按钮不同，所以我需要CSS以某种方式保存以前的状态（例如，缩放旋转的图像）。

我试过一个＆＃34;蛮力＆＃34;方法，创建一个控制旋转的数据状态（0,1,2或3）属性和一个类＆＃34;缩放＆＃34;应用缩放。但是当我放大时，我无法保持旋转。

我还尝试创建了很多CSS以防止所有情况，例如下面的例子，但是没有用。

.zoom [data-state='0']{  
transform: scale(1.3) rotate(0deg);
  -ms-transform: scale(1.3) rotate(0deg); /* IE 9 */
  -moz-transform: scale(1.3) rotate(0deg); /* Firefox */
  -webkit-transform: scale(1.3) rotate(0deg); /* Safari and Chrome */
  -o-transform: scale(1.3) rotate(0deg); /* Opera */
}

[data-state='0']{  
  transform: rotate(0deg);
  -ms-transform: rotate(0deg); /* IE 9 */
  -moz-transform: rotate(0deg); /* Firefox */
  -webkit-transform: rotate(0deg); /* Safari and Chrome */
  -o-transform: rotate(0deg); /* Opera */
}

Answer 1

我想这就是你想要的：http://jsfiddle.net/38AzW/1/

我只在课程center

中添加了以下内容

的CSS：

-webkit-transition: all 0.5s;
-moz-transition: all 0.5s;
-o-transition: all 0.5s;
-ms-transition: all 0.5s;

Answer 2

这只是你身边的语法错误，不应该有空格：

.zoom[data-state='1']{  
  transform: rotate(90deg) scale(1.3);
  -webkit-transform: rotate(90deg)  scale(1.3); 
}

.zoom[data-state='2']{  
  transform: rotate(180deg) scale(1.3);
  -webkit-transform: rotate(180deg)  scale(1.3); 
}
.zoom[data-state='3']{  
  transform: rotate(270deg) scale(1.3);
  -webkit-transform: rotate(270deg)  scale(1.3); 
}

您使用的选择器

.zoom [data-state='1'] {}

指的是数据状态元素，它是缩放元素的子

updated fiddle

应用CSS变换比例并同时旋转

2 个答案: