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.

CSS - Using hover to affect multiple elements differently

I'm looking to create something akin to the Mac App Dock. Basically, I have an number of divs all next to each other with the same class, and a unique ID (done through php).
Currently, when you hover over one element, it magnifies it using transform, however this doesn't affect the elements adjacent to them.
I'm wondering if there's a way to essentially make it so item-2 has a hover effect of transform:scale(2.0), and upon hovering over that element, item-1 & item-3 would get an effect of transform:scale(1.5);
Although, I imagine this is impossible in css. If so, is there a way I can achieve this effect in php or javascript somehow?

This is tricky since transform: scale doesn't seem to behave consistently across browsers.
I put together some CSS and Javascript to do what you described, although making it look good on all browsers would take much more time.
Try out my demo here: CodePen
HTML
<ul id="list">
<li>One</li>
<li>Two</li>
<li>Three</li>
<li>Four</li>
<li>Five</li>
<li>Six</li>
</ul>
CSS
#list li:hover {
zoom: 2;
-webkit-transform: scale(2);
-moz-transform: scale(2);
-ms-transform: scale(2);
-o-transform: scale(2);
transform: scale(2);
position: relative;
z-index: 999;
}
.beside {
zoom: 1.5;
-webkit-transform: scale(1.5);
-moz-transform: scale(1.5);
-ms-transform: scale(1.5);
-o-transform: scale(1.5);
transform: scale(1.5);
}
Javascript (jQuery)
$('#list li').on("mouseenter", function() {
$(this).prev().addClass("beside");
$(this).next().addClass("beside");
});
$('#list li').on("mouseleave", function() {
$(this).prev().removeClass("beside");
$(this).next().removeClass("beside");
});

Is there a meta tag or something for desktops that works like viewport initial-scale?

I know you're thinking that this is a strange request, however I am currently dealing with a client that gave me a template and decided he wanted it 70% smaller after seeing it in a browser and all the HTML done (!!!!). Thus throwing all the work that was done for both of us out the window. If I could adjust the scale to 0.7 (70%) that would be perfect and the project can still roll out the way it was going. Thank you!

body {
zoom: 0.7;
transform: scale(0.7);
transform-origin:0 0;
-ms-transform: scale(0.7);
-ms-transform-origin:0 0;
-moz-transform: scale(0.7);
-moz-transform-origin: 0 0;
-o-transform: scale(0.7);
-o-transform-origin: 0 0;
-webkit-transform: scale(0.7);
-webkit-transform-origin: 0 0;
}

You might be able to use the CSS Zoom property but negativly? - supported in IE 5.5+, Opera, and Safari 4, and Chrome (verifed, please check before downvoting).
Firefox is the only major browser that does not support Zoom (Check here) but you could use the "proprietary" -moz-transform property in Firefox 3.5.
So you could use:
div.zoomed { zoom: 70%; -moz-transform: scale(.7); }

How to reverse the text with js/css? [duplicate]

This question already has answers here:
Closed 12 years ago.
Possible Duplicate:
How does uʍop-ǝpısdn text work?
How to make the text upside down while keep the left-right order?

Firefox / Webkit:
-webkit-transform: rotate(-90deg);
-moz-transform: rotate(-90deg);
IE:
filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=3);

Or, if you want a solution that works most places:
.verticalText
{
-webkit-transform: rotate(-90deg);
-moz-transform: rotate(-90deg);
writing-mode: tb-rl;
filter: flipv fliph;
}
Ultimately I ended up using a HTML5 canvas to draw vertical text in non-IE browsers due to odd results from rotating text.
Edit: Somehow I only managed to copy part of my code. Added the rest.

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>