We Keep Coding

Foundation 6 Drilldown Animation Speed

I'm aiming to apply custom animation speeds to the Foundation 6 drilldown menu in Foundation 6 For Sites. I know that in _settings.scss, you a can alter the initial click animation through $drilldown-transition, however the animation parameters are ignored when going back a level in the drilldown.
I've checked dist > assets > css > app.css to see if some other parameter or some kind of hidden bit of CSS was controlling this, but it's evident to me that it's handled via JS beyond just adding / removing classes.
TLDR; I'm looking for insight on how to control the animation speed / style of the drilldown menu when going back a level vs going forward a level.
EXP: https://media.giphy.com/media/X8M8Hax10K9SslPN1v/giphy.gif

The close-speed was due to the following lines, viewable in dist > assets > css > app.css
.drilldown .is-drilldown-submenu.is-active {
z-index: 1;
display: block;
-webkit-transform: translateX(-100%);
-ms-transform: translateX(-100%);
transform: translateX(-100%);
}
.drilldown .is-drilldown-submenu.is-closing {
-webkit-transform: translateX(100%);
-ms-transform: translateX(100%);
transform: translateX(100%);
}
The shift from -100% to 100% is too extreme to really get the smooth feel you'd expect. Reducing 100% to 5% resolved the issue.
.mobile_nav > .grid-x > .cell > .is-drilldown .drilldown .is-drilldown-submenu.is-closing {
-webkit-transform: translateX(5%);
-ms-transform: translateX(5%);
transform: translateX(5%);
}

zoom in with Javascript (jQuery)

I need to zoom in with Javascript(jQuery),
For example, Ctrl + scrolling mouse.
I tried
document.body.style.zoom
but, it's not working in Firefox.

I don't know what kind of zoom do you exactly want to achieve, but maybe you should try to use transform: scale(X); with transform-origin: 0 0; and max-width set to a proportional value i.e.:
body {
max-width: 50%;
transform: scale(2);
transform-origin: 0 0;
}

Browser Zoom to 75% when application loads on 1024x768

My application looks better when browser zoomed to 75% in IE 9.
When resolution is 1024x768 .
Can i make the IE 9 browser to zoom to 75%.
I tried with media queries.
#media (min-width : 980px) and (max-width: 1199px) {
.zoo {
transform: scale(0.75);
-webkit-transform: scale(0.75);
-webkit-transform-origin: 0 0;
-moz-transform: scale(0.75);
-moz-transform-origin: 0 0;
-o-transform: scale(0.75);
-o-transform-origin: 0 0;
-ms-transform: scale(0.75);
-ms-transform-origin: 0 0;
}
}
Added this css class to body.But it dosen't work

So you want to apply manual browser zooming using CSS and/or JS?
This is really not possible with CSS and/or JQuery. Manual browser
zoom and CSS zoom property both work differently and will produce
different results.
Alternative: On page load provide users with a modal window
instructing them how to manually Zoom in/out, close it after they have
zoomed successfully.
Source:
https://stackoverflow.com/a/30152402/2534513
Changing the browser zoom level

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); }

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>