css - 如何使用 javascript 动态修改 CSS 标记值

Question

基于透视的旋转：我有一个 div，我想使用 webkit 在 CSS3 中旋转。div 在 jquery 中的用户鼠标按下事件后旋转

我使用关键帧来做到这一点

@-webkit-keyframes rotate {

enter code here

0% {
    -webkit-transform: rotate(0deg);

}100% {
    -webkit-transform: rotate(90deg);

}

}

@-webkit-keyframes rotate2 {

0% {
    -webkit-transform: rotate(90deg);
    -webkit-transform: rotateX(45deg);  
}100% {
    -webkit-transform: rotate(180deg);
    -webkit-transform: rotateX(45deg);  
}

}

@-webkit-keyframes rotate3 {

0% {
    -webkit-transform: rotate(180deg);
}100% {
    -webkit-transform: rotate(270deg);
}

}

@-webkit-keyframes rotate4 {

0% {
    -webkit-transform: rotate(270deg);
}100% {
    -webkit-transform: rotate(360deg);
}

}

我的问题是我还应用了 webkit 透视图来提供 3d 视图，并且我必须旋转 div 以保持透视 X 角为 45 度......这怎么可能？

body {
   -webkit-transform-style: preserve-3d;
   -webkit-perspective: 500;
   -webkit-perspective-origin: 45%;
}


#mydiv {
  height: 300px;
  width: 100px;
  border: 2px solid #D3DAED;
  position:absolute;
  top:29%; 
  left:45%;
  **-webkit-transform: rotateX(45deg);**
}

Answer 1

我不太了解您要做什么，但是在 jquery 中您可以像这样动态更改 css：

$('#mydiv').css('-webkit-transform', 'rotateX(45deg)');