We Keep Coding

Edge browser issue when using scale css

I have a scroll jacking on a video that scales the video container using css transform. It's working fine on all browsers however in IE and edge it does the scale transform but the video gets pixelated when the video is scaling up.
CSS
transform: translateY(0) scale(3,3);
-webkit-backface-visibility: hidden;
-ms-backface-visibility: hidden;

Try this
-webkit-transform: translateY(0) scale(3,3);; /* android, safari, chrome */
-moz-transform: translateY(0) scale(3,3);; /* old firefox */
-o-transform: translateY(0) scale(3,3);; /* old opera */
-ms-transform: translateY(0) scale(3,3);; /* old IE */
transform: translateY(0) scale(3,3);; /*standard */

I suggest you to refer links below may give you some more information.
transform property
CSS Demo: transform
If still not work then I suggest you to provide your full sample code.
We will try to make a test with it and try to find a solution for it.

Invalid Property when applying combine transformation

When I use the tranform property with one transformation everything works fine but I get 'invalid property' when they are combined. I'm testing with Opera
Does not work
transform: translate(300,0px) rotate(90deg);
Does work
transform: translate(300,0px);

You should use px values instead of single.
Do:
transform: translate(300px, 0px) rotate(90deg);
Instead of:
transform: translate(300, 0px) rotate(90deg);
Hope this helps!

How to create a navigation menu around an image

I have a heart and I need to construct the menu around that heart on both sides I have over 27 menu items.
I need it to be mobile friendly. Please any help?

You can use the transforms declarations of css to rotate the <span> of text.
http://www.w3schools.com/cssref/css3_pr_transform.asp
span#menu1 {
-ms-transform: rotate(7deg); /* IE 9 */
-webkit-transform: rotate(7deg); /* Chrome, Safari, Opera */
transform: rotate(7deg);
}

Vertical Tabs with Vertical Text in CSS

I have a series of .jpeg menu tabs, which contain vertical text, and are oriented vertically (height > width). Attempting to create vertical tabs, such that they go from the top to the bottom of the screen in series, but after reading some documentation, I'm still not sure exactly where to start. Any tips? Sorry for the extremely vague question, but most search results assume you want a vertical menu with horizontal text.

You can use word-wrap: break-word; combined with a narrow width value to force your text to wrap for every single letter: http://jsbin.com/ominus/1/edit
Rotating would look better, but it's another option!

If browser compatibility is not a priority, you can try using CSS3:
.rotated-text {
-webkit-transform: rotate(-90deg);
-moz-transform: rotate(-90deg);
-o-transform: rotate(-90deg);
transform: rotate(-90deg);
filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=3); /* Should work on IE9+ */
}
Working example: http://jsfiddle.net/C3qrT/
Then you must work to align text as you want.

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

Is there a library/simple way to flip an image?
Flip image like this:
AABBCC CCBBAA
AABBCC -> CCBBAA
I'm not looking for animations, just flip the image.
I've googled to no avial and only found a complex version that utilized SVG on MozillaZine which I'm not confident that it'll work cross-browser.

The following CSS will work in IE and modern browsers that support CSS transforms. I included a vertical flip class just in case you might want to use it too.
.flip-horizontal {
-moz-transform: scaleX(-1);
-webkit-transform: scaleX(-1);
-o-transform: scaleX(-1);
transform: scaleX(-1);
-ms-filter: fliph; /*IE*/
filter: fliph;
}
.flip-vertical {
-moz-transform: scaleY(-1);
-webkit-transform: scaleY(-1);
-o-transform: scaleY(-1);
transform: scaleY(-1);
-ms-filter: flipv; /*IE*/
filter: flipv;
}

Take a look at one of the many reflection.js type libraries, They are pretty simple. In IE they will take and use the 'flipv' filter, there is a 'fliph' filter too. Inside of other browsers, it will create a canvas tag and use the drawImage. Although Elijah's answer probably supports the same browsers.

Just dug up this answer while trying to fix a bug, while the suggested answer is correct I have found that it breaks most modern CSS Linting rules regarding the inclusion of all vendor rules for the transform. However, including the -ms-tranform rule causes an odd bug in IE9 where it applies the filter and -ms-transform rules causing an image to flip and flip back again.
Here is my suggested improvement which also supports CSS Lint rules:
.flip-horizontal {
-moz-transform: scaleX(-1);
-webkit-transform: scaleX(-1);
-o-transform: scaleX(-1);
-ms-transform: scaleX(1); /* linting rule fix + IE9 fix */
transform: scaleX(-1);
-ms-filter: fliph;
filter: fliph;
}
.flip-vertical {
-moz-transform: scaleY(-1);
-webkit-transform: scaleY(-1);
-o-transform: scaleY(-1);
-ms-transform: scaleY(1); /* linting rule fix + IE9 fix */
transform: scaleY(-1);
-ms-filter: flipv;
filter: flipv;
}

If you only want to flip a background image you can use the class on the internal elements inside a flipped div. Basically you're flipping the internal elements with the main div, but flipping each of them back. Works in Firefox anyway.
Like this:
<div id="container" class="flip-horizontal"> <!-- container would have your background image -->
<h3 class="flip-horizontal">Hello There!</h3>
<p class="flip-horizontal">Here is some text</p>
</div>