Response title
This is preview!
Move this topic
jQuery and Css transform:rotateY?
in Using jQuery
•
8 years ago
Is there a way to replicate the effects of css's transform:rotateY(xDeg) so that you can transition between a range of degrees? Or is there a a javascript way of affecting it in a similar fashion?
I'm trying to make a standard box transform(morph) all the way through to a set degree. But I'm not having any luck. Just curious if this is at all possible atm mixing css and jQuery.
Thanks for reading
I'm trying to make a standard box transform(morph) all the way through to a set degree. But I'm not having any luck. Just curious if this is at all possible atm mixing css and jQuery.
Thanks for reading
1
Replies(15)
Re: jQuery and Css transform:rotateY?
8 years ago
Leave a comment on jakecigar's reply
Re: jQuery and Css transform:rotateY?
8 years ago
Oh yeah Transit. That's a nice plugin.
I'll be honest I'm trying not to use plugins(kinda ironic though since im using jQuery, but starting somewhere)
I'm more trying to understand the base mechanics in any sense so I can create the functions myself.
*edit* I see it. Hmm... whats the general concensus on looking at how they've coded the interaction between css and jQuery here? Is it frowned upon to look at their source code?
I'll be honest I'm trying not to use plugins(kinda ironic though since im using jQuery, but starting somewhere)
I'm more trying to understand the base mechanics in any sense so I can create the functions myself.
*edit* I see it. Hmm... whats the general concensus on looking at how they've coded the interaction between css and jQuery here? Is it frowned upon to look at their source code?
Re: Re: jQuery and Css transform:rotateY?
8 years ago
Re: edit.
JΛ̊KE
I would never consider using a plugin that I didn’t read. I read it, used it, and have recommended it many times. It just works. And it’s very well integrated into jQuery.
JΛ̊KE
Leave a comment on 7blake's reply
Re: jQuery and Css transform:rotateY?
8 years ago
They do full rotation. Did you scroll down to the 2d transformations? You can reverse engineer the code.
The only way to do it the hard way is changing the inline style attribute, which is what they do!
JΛ̊KE
JΛ̊KE
Leave a comment on jakecigar's reply
Re: jQuery and Css transform:rotateY?
8 years ago
Why do you want to replicate the functionality of CSS Transform RotateY?
Why not just use the CSS transform?
What am I missing here?
Re: Re: jQuery and Css transform:rotateY?
8 years ago
With CSS alone you can rotate to any given angle. With that plugin you can rotate to a variable, or animate from one angle to another where neither is known when you would write CSS. Read the plugin, it’s very cool mimicking .animate()
JΛ̊KE
JΛ̊KE
Re: Re: jQuery and Css transform:rotateY?
8 years ago
Oh, perhaps there is a way to do this with pure css?
To put it simply. I don't know of a way using pure css to transform a Rotate(y) from 0deg - 60deg in a fluid motion. The only thing I could think of is transitions to (0deg), but I'm unsure if it's possible to retain the transition once it's finished.
I suppose it's possible to execute a transition on click, then once it's at (odeg) via the transition, change the rotate(60deg) to (0deg) so there is no snap. I'll have test.
Hmm ok. One simple way of atleast doing what I was after
http://jsfiddle.net/6nYRM/1/
I think this will work. I can control the transition, then change the elements CSS permanently for that session. Thanks for the idea watusiware :) I'm pretty sure I can build up from this part.
To put it simply. I don't know of a way using pure css to transform a Rotate(y) from 0deg - 60deg in a fluid motion. The only thing I could think of is transitions to (0deg), but I'm unsure if it's possible to retain the transition once it's finished.
I suppose it's possible to execute a transition on click, then once it's at (odeg) via the transition, change the rotate(60deg) to (0deg) so there is no snap. I'll have test.
Hmm ok. One simple way of atleast doing what I was after
http://jsfiddle.net/6nYRM/1/
I think this will work. I can control the transition, then change the elements CSS permanently for that session. Thanks for the idea watusiware :) I'm pretty sure I can build up from this part.
Leave a comment on watusiware's reply
Re: jQuery and Css transform:rotateY?
8 years ago
Tedious lines of CSS for every degree you want to use and every different browser prefix that you need to use.
transform - CSS | MDN And many other pages all over the net to show you the hard way.
JΛ̊KE
Or
A line of javaScript.
transform - CSS | MDN And many other pages all over the net to show you the hard way.
JΛ̊KE
Re: Re: jQuery and Css transform:rotateY?
8 years ago
Not sure I follow you. A single line of jS, in reference to using Transits plugin correct? If that's the case, sure you're right. But this way I know how to do it at the base. Now comes the part of learning how to simplify it I suppose.
You say one line of jS, but arent I loading multiple lines to just have transit's source code work? Granted the coding for it is elegant, and works cross browsers, it's still more than just one line of code in the end? Sorry, suppose I don't understand exactly what you mean.
In anycase, your initial answer is still marked best answer for that very reason.
You say one line of jS, but arent I loading multiple lines to just have transit's source code work? Granted the coding for it is elegant, and works cross browsers, it's still more than just one line of code in the end? Sorry, suppose I don't understand exactly what you mean.
In anycase, your initial answer is still marked best answer for that very reason.
Leave a comment on jakecigar's reply
Re: jQuery and Css transform:rotateY?
8 years ago
One line of code that you need to write. That plugin is small and, even though I did’t write it, is my go-to-plugin for dynamically adding CSS3 animations.
If you only want to rotate 90 degrees you could hard code the different prefixed codes in your CSS file. But when you want to spin something n degrees from any starting point, static CSS does not work very well.
You can play with the raw CSS3 rotations using the code I shared before. I’ve done it. I probably will continue to do it. some times. But it’s not the most efficient way for me to write code.
JΛ̊KE
JΛ̊KE
Leave a comment on jakecigar's reply
Re: jQuery and Css transform:rotateY?
8 years ago
Thanks, Jake - I understand the use case. Yes, pure CSS is useful only if you know in advance the dimensions of the transform(s) that you want to perform.
In many cases, these are relative units - for example, to slide-in a panel you would start at, say -100% or +100% X and translate to 0. And so pure CSS is useful in many every-day web page animations.
If you need to rotate or move to some arbitrary position, then you cannot (easily) do it with pure CSS. Surely, a different rule for each degree is extreme!
It's not clear, though, what the requirement here is. I don't know if he wants to rotate by 60 degrees, or by any arbitrary number of degrees 0 to 60 to be determined at run-time.
Re: Re: jQuery and Css transform:rotateY?
8 years ago
True, it’s not 100% clear. But that’s why we give lots of answers with lots of information.
JΛ̊KE
JΛ̊KE
Leave a comment on watusiware's reply
Re: jQuery and Css transform:rotateY?
8 years ago
Yes, you guys really do give lots of information/answers :) And it's very much appreciated. It's obvious, but just to state it, I'm not even a novice at coding, so alot of fundamental concepts are still foreign to me. I can defiantly understand the Transit method being much better in efficiency by having cross browser information in the source code so there isn't redundancies when utilizing it.
What I'm trying to do is a simple photo gallery test right now, using the concept of a book to view the photos. The photos(pages) on either side of the main picture have a perspective change via rotateY(). I was just trying to get a feel for how to animate perspectives so it appears as if the pages are "flipping". So all the pages need to translate to a set degree depending on which picture is clicked.(to maintain visual flow consistency)
Anyhow, it's beyond simple for this forum. Just I don't particularly have any resources to pull from for even figuring out the question first for myself at this stage. Sorta why I'm trying to understand as many fundamentals as I can. Hope it's not a problem. I don't exactly want to dilute this forum with simply stuff, if it's a problem I'll just be more reserved with posting these simple problems here until I know I have something more complicated to add. Anyhow! Time to let this thread die. Transit is the most effective method for dealing with this situation. Thanks for all the info guys!
Kind regards
What I'm trying to do is a simple photo gallery test right now, using the concept of a book to view the photos. The photos(pages) on either side of the main picture have a perspective change via rotateY(). I was just trying to get a feel for how to animate perspectives so it appears as if the pages are "flipping". So all the pages need to translate to a set degree depending on which picture is clicked.(to maintain visual flow consistency)
Anyhow, it's beyond simple for this forum. Just I don't particularly have any resources to pull from for even figuring out the question first for myself at this stage. Sorta why I'm trying to understand as many fundamentals as I can. Hope it's not a problem. I don't exactly want to dilute this forum with simply stuff, if it's a problem I'll just be more reserved with posting these simple problems here until I know I have something more complicated to add. Anyhow! Time to let this thread die. Transit is the most effective method for dealing with this situation. Thanks for all the info guys!
Kind regards
Leave a comment on 7blake's reply
Re: jQuery and Css transform:rotateY?
8 years ago
Flipping? Did someone say flipping?? I found one demo on the net that flipped in all flipping browsers. I did some research into cross platform flipping. It culminated with Flip Cards along the way I did a nice demo Simple Card Flipper all 100% raw CSS with a little jQuery.
JΛ̊KE
JΛ̊KE
Leave a comment on jakecigar's reply
Re: jQuery and Css transform:rotateY?
8 years ago
Ah that is nice. I'll take a look at this method, see if I can learn a few things :) Thanks Jake
Leave a comment on 7blake's reply
Change topic type
Link this topic
Provide the permalink of a topic that is related to this topic
Reply to 7blake's question
{"z7664639":[14737000005193169,14737000005193419],"z2950240":[14737000005189327,14737000005189375,14737000005189335,14737000005189383,14737000005189707,14737000005189763,14737000005189797,14737000005189803],"z28172616":[14737000005189322,14737000005189333,14737000005189485,14737000005189759,14737000005189801,14737000005189805]}