i was wondering if these two set of statements are equivalent or not. i thought they were but they seem to be doing different things.
-webkit-transform: rotate(45deg);
-webkit-transform: translateX(200px);
-webkit-transform-origin:0% 100%;
and...
-webkit-transform: rotate(45deg) translateX(200px);
-webkit-transform-origin:0% 100%;
it seems that on the first set of statements, only the translateX gets performed and rotate does not. i changed the order around for the first set of statements to...
-webkit-transform: translateX(200px);
-webkit-transform: rotate(45deg);
-webkit-transform-origin:0% 100%;
and it seems to just perform the rotate and not the translateX. does it just do the latter one? however by writing...
-webkit-transform: rotate(45deg) translateX(200px);
-webkit-transform-origin:0% 100%;
it does both the rotate first and then the translateX. i thought this was supposed to just be a shorthand of writing it. is it not?
here is a link to the code. it's really simple.
http://jsfiddle.net/gCeUe/2/
thanks for the help! clear and thorough help would be much appreciated = )
CSS is parsed in a way so that the last statement is the only one that is rendered:
color: red;
color: green;
color: blue; /* This is what the color will be */
When you write your code like this:
-webkit-transform: rotate(45deg);
-webkit-transform: translateX(200px);
-webkit-transform is set to rotate(45deg) and then overwritten with translateX(200px).
This is the correct syntax:
-webkit-transform: rotate(45deg) translateX(200px);
Related
I want to create a mixin for transform that has two arguments - translate and rotate. I've tried it in several ways but none of them works and I do not know why.
#mixin transform($transforms) {
-moz-transform: $transforms;
-o-transform: $transforms;
-ms-transform: $transforms;
-webkit-transform: $transforms;
transform: $transforms;
}
#mixin rotate ($deg) {
#include transform(rotate(#{$deg}deg));
}
#mixin translate($x, $y) {
#include transform(translate($x, $y));
}
In nav.scss I included it like this
#include transform(rotate(45));
#include transform(translate(0,9px));
It doesn't change anything in the presentation page.
Without mixin I simply use:
span:before {
transform: translateY(9px) rotate(45deg);
}
and it works but I want to achieve the same result with a mixin, but I don't know how. I started learning SASS a few days ago.
In general, I would recommend you use Autoprefixer to handle vendor prefixes as you'll often add way more prefixes than needed.
In the case of transform, you would probably be fine just adding
-webkit-transform: ...;
transform: ...;
Also, it becomes rather hard to handle when you need to deal with property values:
transition: transform 300ms;
// prefixed
-webkit-transition: -webkit-transform 300ms;
transition: -webkit-transform 300ms;
transition: transform 300ms;
transition: transform 300ms, -webkit-transform 300ms;
To answer your question I think the easiest way is to use argument-lists (allows any number of arguments to be passed) joined together in a space-separated list:
// Mixin
#mixin transform($transforms...) {
// combine the passed transforms into a space separated list
$transform-list: join($transforms, null, space);
// print out the transforms
-webkit-transform: $transform-list;
-moz-transform: $transform-list;
-ms-transform: $transform-list;
-o-transform: $transform-list;
transform: $transform-list;
}
// Include
span::before {
#include transform(
rotate(90deg),
translate(0,9px),
// ... add more transforms if you need
);
}
// CSS output
span::before {
-webkit-transform: rotate(90deg) translate(0, 9px);
-moz-transform: rotate(90deg) translate(0, 9px);
-ms-transform: rotate(90deg) translate(0, 9px);
-o-transform: rotate(90deg) translate(0, 9px);
transform: rotate(90deg) translate(0, 9px);
}
I don't think that you need to nest the mixins like that. You can take advantage of optional arguments and the keyword syntax:
#mixin transformNew($rotate: 0, $translate: translate(0, 0)) {
-moz-transform: rotate(#{$rotate}deg) $translate;
-o-transform: rotate($rotate) $translate;
-ms-transform: rotate(#{$rotate}deg) $translate;
-webkit-transform: rotate(#{$rotate}deg) $translate;
transform: rotate(#{$rotate}deg) $translate;
}
div {
#include transformNew($translate: translate(10px, 40px));
background: red;
}
The arguments for the mixin now have a default value, if you want to call it with only one argument. You can call arguments explicitly by using the keyword syntax. In my example I wanted only the second argument, so I did this: #include transformNew($translate: translate(10px, 40px));. If you only need the first argument, then it is enough to just pass the value, no need for the keyword.
If you need both arguments, you can simply pass them both. In your code, if you called the mixin twice, you had overwritten the first value with the second call.
That won't happen here. I also created a codepen for you to play around with the code.
I have the following working but want the change to stick also when the field is no longer in focus.
I there any way of doing that within CSS?
.contact-field:focus ~ .label {
transform: translate3d(0px, -26px, 0px) scale3d(0.8, 0.8, 1) rotateX(0deg) rotateY(0deg) rotateZ(0deg) skew(0deg, 0deg);
transform-style: preserve-3d; opacity: 0.7;
}
</style>
CSS is intended for styling the page, not to change state. There are hacks that could do what you want to do, but in the end they will all fail one way or another depending on the browser environment.
It's much clearer (and more robust) to use JS for this:
document.querySelector('.contact-field').addEventListener('focus', () => {
document.querySelector('.contact-label').classList.add('visited')
});
I got a friend to help me out.
This did the trick:
$('.contact-field').on('focus', function(){
$(this).addClass('visited');
})
And then the CSS:
.contact-field:focus ~ .label-in-footer,
.contact-field.visited ~ .label-in-footer {
transform: translate3d(0px, -26px, 0px) scale3d(0.8, 0.8, 1) rotateX(0deg) rotateY(0deg) rotateZ(0deg) skew(0deg, 0deg);
transform-style: preserve-3d; opacity: 0.7;
}
In my css i use the following code to rotate and scale on hover:
.myclass:hover img {
-ms-transform: scale(1.1) rotate(-20deg);
-webkit-transform: scale(1.1) rotate(-20deg);
-moz-transform: scale(1.1) rotate(-20deg);
transform: scale(1.1) rotate(-20deg);
}
This code works on Chrome but not on IE11. Any help?
Thank you in advance
I was having this same problem in IE 11, I could realize that if I reduce the time of the animation could works (ex. 0.3s). But that wasn't a solution for me.
While I was reading How to fix shaking CSS transitions in Firefox: https://gielberkers.com/how-to-fix-shaking-css-transitions-in-firefox/
I found one solution (for Firefox), and I thought that could work the same concept for IE.
The idea is rotate (the minimum possible) the div or image while your making the scale. Just like this:
#keyframes loading
0%
transform: scale(1);
50%
transform: scale(1.2) rotate(0.02deg);
100%
transform: scale(1);
I made this trick and works in IE 11
I am trying to animate two images from the centre, the the opposite sides of each other.
One to the far left, and the other to the far right, with some text in the middle.
see jsFiddle
I have seen on a few websites now an is-visible css attribute (for example, something like this):
.image.is-visible {
left: 0%;
-webkit-transform: translateY(0%);
-moz-transform: translateY(0%);
-ms-transform: translateY(0%);
-o-transform: translateY(0%);
transform: translateY(0%);
}
.image {
background-position: right;
-webkit-transform: translateX(45%);
-moz-transform: translateX(45%);
-ms-transform: translateX(45%);
-o-transform: translateX(45%);
transform: translateX(45%);
I have my transform: translateY(0%); on my jsFiddle, but how do you add a class, for example: is-visible to animate it on the page?
Add Class is probably done by a jQuery
https://api.jquery.com/addclass/
So you just need to define when the class should be added
Maybe while scrolling
Example:
http://codepen.io/LukeD1uk/pen/zvGQZN
Or if the document is loaded
$( document ).ready(function() {
$(".someclass").addClass("is-visible");
});
I have an horizontal menu and I want to rotate 90° left or right some of its tabs.
Problem is that the transform property also rotates descendants.
It looks difficult to put them back in place, is there a solution?
P.S. I want to avoid using images or JS, they are ok as fallbacks.
You could apply the reverse rotation on the descendants.
For example
div.parent{
-webkit-transform: rotate(-90deg);
-moz-transform: rotate(-90deg);
}
div.parent span{
-webkit-transform: rotate(90deg);
-moz-transform: rotate(90deg);
}
Example: http://jsfiddle.net/RpcfB/1/
Fyi, you will need to play with padding and/or margin to make it all work.
EDIT
I'm afraid it's more complicated than that.
That's the truth!! Although, I as mentioned, you have to play with the css.
For example, to fix the first one, you need to make these adjustments:
add a class to the first li
#nav_main_gts > li.rotate{ //ADD CLASS HERE
-moz-transform: rotate(-90deg);
-webkit-transform: rotate(-90deg);
-o-transform: rotate(-90deg);
-ms-transform: rotate(-90deg);
filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=-1);
transform: rotate(-90deg);
}
Then change the second rule to target the next ul not li
Then fiddle with the margin to get it all in place. Remember, because the first li is rotated, down is not left, so a negative margin-left is needed
#nav_main_gts > li.rotate ul{ //CHANGE TO UL HERE
-moz-transform: rotate(90deg);
-webkit-transform: rotate(90deg);
-o-transform: rotate(90deg);
-ms-transform: rotate(90deg);
filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=1);
transform: rotate(90deg);
margin-left:-100px; //ADD A MARGIN HERE
}
continue with the others.
Updated example: http://jsfiddle.net/FKCTk/1/