iOS 8 css rotateY/rotateX element disappears

I am trying to get css rotate properties to work on iOS 8. The basic idea is, as you scroll down the page, the card will flip around. This works on desktop and on mobile iOS 7, but not iOS 8 on iPhone.

Here is the css on the card element:

position:fixed;top:50%;left:50%;height:508px;width:330px;margin-top:-254px;margin-left:-165px;background: url(../img/card_tyffon.jpg)no-repeat;background-size:100%;-webkit-transform: scale(1,1);-moz-transform: scale(1,1);-ms-transform: scale(1,1);-o-transform: scale(1,1);transform: scale(1,1);-moz-border-radius:25px;-webkit-border-radius:25px;border-radius:25px;-moz-box-shadow:0px0px24px#000000;-webkit-box-shadow:0px0px24px#000000;box-shadow:0px0px24px#000000;cursor: pointer;

In Safari, if I simply add:

-webkit-transform:rotateY(1deg); or -webkit-transform:rotateX(1deg);

The element disappears; however, -webkit-transform:rotate(1deg); does not make the element disappear.

Im not sure what could be causing this, as the card doesn't disappear in <iOS8.

Any help or ideas is greatly appreciated. Thanks