2

パースペクティブ ベースの回転: Webkit を使用して CSS3 で回転させたい div があります。jqueryのusermouse downイベントの後にdivが回転します

そのためにキーフレームを使用します

@-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 のビューを提供し、パースペクティブ X 角度を 45 度に維持して div を回転させる必要があることです...どうすれば可能ですか?

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);**
}
4

1 に答える 1

2

何をしようとしているのか正確にはわかりませんが、jquery では次のように css を動的に変更できます。

$('#mydiv').css('-webkit-transform', 'rotateX(45deg)');
于 2012-02-03T05:42:41.100 に答える