0

I'm trying to script the rotation property of an element in Adobe Edge, but can't work out the syntax.

I'm trying this:

var element = sym.$("Rectangle");
element.css("transform", "rotate(25deg)");

But it doesn't change the rotation at all. Using this exact same method works for other CSS properties, eg:

var element = sym.$("Rectangle");
element.css("left", 150+myVar);

Anyone know how I can access the transform:rotate property here? Thanks!

Kara
  • 6,115
  • 16
  • 50
  • 57
kinkersnick
  • 1,301
  • 1
  • 13
  • 19

2 Answers2

0

which browser are you testing with? apparently, there's no official support for the transform property. so you have to use a modified version of this based on your browser.

http://www.w3schools.com/cssref/css3_pr_transform.asp

henry bemis
  • 490
  • 3
  • 8
0

This is what I used to handle a variety of browsers. This would be needed any time there is a difference in how different attributes are assigned. You'll see what I mean below with this example. I put this in the 'click' event to wiggle a business card when clicked.

If a transformation works in one browser but not another, you can look up the attribute at w3schools.com and it will tell you if there are browser differences. 

// Get us a random rotate transform value between -5 and 5
var rotate_val = Math.floor((Math.random()*10)+1) - 5;

// Get instance of this element
var card_element = sym.$("wr_business_card");

// Set a random rotation for the business card when clicked
card_element.css("transform", "rotate(" + rotate_val + "deg)");
card_element.css("-ms-transform", "rotate(" + rotate_val + "deg)");     /* IE 9 */
card_element.css("-webkit-transform", "rotate(" + rotate_val + "deg)"); /* Safari and Chrome */
Mizagorn
  • 1
  • 1