How to modify a CSS tag value dynamically using javascript

Question

Perspective based rotation : I have a div which i want to rotate in CSS3 using webkit. The div is rotated after a usermouse down event in jquery

I use keyframes to do that

@-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);
}

}

My question is I have also applied webkit perspective to give a 3d kind of view and I have to rotate the div keeping the perspective X angle to 45deg...how is it possible ?

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

techfoobar · Accepted Answer · 2012-02-03 05:46:29Z

2

I don't really understand exactly what you are trying to do, but in jquery you can alter css dynamically like this:

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

edited Feb 3, 2012 at 5:46

techfoobar

66.8k14 gold badges117 silver badges138 bronze badges

answered Feb 3, 2012 at 5:42

Alpaus

6561 gold badge7 silver badges21 bronze badges

Sign up to request clarification or add additional context in comments.

5 Comments

techfoobar Over a year ago

Changed $(#mydiv) to $('#mydiv')

user1184100 Over a year ago

yeah rotateX(45deg) will apply the webkit perspective and gives a 3d look.. but it will not rotate the div at angle 45 degrees

Alpaus Over a year ago

@user1184100 - so you aren't asking how to modify the CSS in JS/jquery as per the title in the question? rather which CSS to substitute in order to make your CSS correct?

user1184100 Over a year ago

I have uploaded the screenshots => Image 1 :: imageshack.us/photo/my-images/594/tilt1m.jpg Image 2 :: imageshack.us/photo/my-images/804/tilt2.jpg First image has tilt effect .. but i want the tilt effect to be there when the image is rotated 45degrees.. 2nd image does not have tilted effect but has been rotated 45deg

user1184100 Over a year ago

Thank you..got it now i'm concatenating the transforms .. -webkit-transform: rotateX(45deg) rotate(90deg);

Collectives™ on Stack Overflow

How to modify a CSS tag value dynamically using javascript

Perspective based rotation : I have a div which i want to rotate in CSS3 using webkit. The div is rotated after a usermouse down event in jquery

1 Answer 1

5 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

Perspective based rotation : I have a div which i want to rotate in CSS3 using webkit. The div is rotated after a usermouse down event in jquery

1 Answer 1

5 Comments

Your Answer

Sign up or log in

Post as a guest

Related