last day (14 days later) » 

7:53 PM
3
A: How to rotate div 360 in 3D in Y axis?

LemmmyYou need to actually make the rotation animation. In the site you specified, it is defined as: @-webkit-keyframes rotation { 0% { -webkit-transform: rotateY(0deg); transform: rotateY(0deg); } 50% { -webkit-transform: rotateY(180deg); transform: rotateY(180deg)...

 
Before I accept the answer and upvote, how can I have it switch to another text once it turns to the back? Also how can I optimize code to make more sense? I kind made guesses as I was creating the CSS, so believe it is not clean.
 
You would have two texts, the second one having transform: rotateY(180deg);. You would also make sure that they overlap. There is no "optimising" the code - it makes plenty of sense as it is.
 
What does all mean for transition and perspective? Also what is do the percentages, e.g. 0%, 50%, etc. represent?
also how did you obtain the rotation in the site specified?
 
transition and perspective's MDN articles. all in transition means that the transition will apply to all properties (you also do not need transition at all in this case) and perspective's property is the <length> property; the distance from the z plane. The percentages are the keyframe position: 0% is the start of the animation, 50% is the middle and 100% is the end.
I found rotation by looking at the source code.
 
Hello
how did you find it in the source code? Did you use Chrome dev tool?
 
7:58 PM
There are many ways you can do this. The first is to right click the page, click View Source, look for the .css file <link>ed and then Ctrl + Find the rotation animation. You can also use the 'Sources' tab in the Chrome Dev Tool.
The Z plane is one of the 3D axis. Here is how the axis look, where the grid is the user's screen:
The Z plane is the one that moves forwards and backwards. When there is perspective applied, it will make the object look smaller or bigger. If you have a perspective length of 1000px, then an object 1000px 'away' (or at 1000px Z) will be its tiniest.
As a personal suggestion, try using Google or another search engine before asking on Stack Overflow. The Mozilla Developer Network is an excellent resource for information related to HTML, CSS and JavaScript.
 
I did did the research but had difficulty understanding. And by 1000px 'away', do you mean it is 1000px closer to the user? Since it should be standing on 1000px on +z ?
 
Objects z>0 become larger, objects z<0 become smaller. z>0 would be +z, and z<0 would be -z.
 
So since 1000px, should be larger, correct?
 
Yes. -1000px would be smaller. My mistake.
 
Got it thanks! Is there a good resource to start learning CSS animation?
 
8:11 PM
The MDN article on animation is a good resource. If your brain works more like an infant's, you can read the w3schools article.
If you found my answer helpful, and it solved your problem, please mark it as the accepted answer.
 
Just did. Thank you!
 
8:32 PM
Sorry but one more question. What's the need for transition property: all 1.0s linear if you already have animation?
 

last day (14 days later) »