0

I'm developing a board game and would like to know how i can use css or JavaScript to dynamically rotate a div so that each player can play from bottom up.

Player One

Player Two

Community
  • 1
  • 1
Q_Mlilo
  • 1,729
  • 4
  • 23
  • 26
  • Your board isn't flipped, it's rotated 180 degrees. You should be implementing logic to let the player start as either color, not hacking it up with CSS. – user229044 Nov 01 '10 at 13:30
  • The board is rotated 180 degrees in the image above versus a mirror image which is what meagar is referring to. – John Strickler Nov 01 '10 at 13:32

2 Answers2

2

From earlier stackoverflow post:

Cross-browser way to flip html/image via Javascript/CSS?

.flip-vertical {
    -moz-transform: scaleY(-1);
    -webkit-transform: scaleY(-1);
    transform: scaleY(-1);
    filter: flipv; /*IE*/
}
Community
  • 1
  • 1
Brian Scott
  • 9,221
  • 6
  • 47
  • 68
  • This works but dragging and dropping is no longer working - am using jQuery UI. – Q_Mlilo Nov 01 '10 at 13:45
  • Try removing the image class on mouse down, hiding the original image, dragging a placeholder image and then reattaching upon release. That way jQuery behaviour will remain unaffected during the dragging and dropping. – Brian Scott Nov 02 '10 at 13:34
1

If you want to rotate the image 180 degrees and then expect dragging and dropping to work, you need to be a little less lazy and just code the thing from each user's perspective IMO.

Fiona - myaccessible.website
  • 14,481
  • 16
  • 82
  • 117
  • Didn't want to re-invent the wheel - if there's no easier way then that would be my last option. – Q_Mlilo Nov 01 '10 at 13:58