3D Image rotation CSS [closed] - javascript

Closed. This question needs to be more focused. It is not currently accepting answers.
Want to improve this question? Update the question so it focuses on one problem only by editing this post.
Closed 2 years ago.
Improve this question
In the following post the image rotates in the plane of the screen CSS3 Rotate Animation, can you help me out on how to make an image rotate into the plane of the page using CSS/JS?
I have added a gif to show the type of rotation I am trying to achieve.

May this help you -:
.coin{
width: 200px;
height: 200px;
border-radius: 50%;
background-color: red;
animation: animate 1s linear infinite;
perspective: 800px;
}
#keyframes animate {
0%{
transform: rotateY(0deg);
}
100%{
transform: rotateY(360deg);
}
}
You need to add a div in html file -
<div class='coin'></div>
I hope this was what you were expecting.. Thanks

What you need simplifies to this:
.image{
animation: spin 1.2s linear infinite;
}
#keyframes spin {
0% { transform: rotate(0deg); }
100% { transform: rotate(360deg); }
}
First, select the image and set animation to an animation with arbitrary name (spin sounds good for something rotating, but choose what you want. spin is the name i choose, 1.2s is duration but it can be ms as well like 500ms or 1200ms.
Then, define the animation by calling #keyframes animationName and then every attributte may be a percentaje, or from/to keywords like this too:
#keyframes spin {
from { transform: rotate(0deg); }
to { transform: rotate(360deg); }
}
But by using that way you can't customize that much, you only get a starting and a finish point. With percentajes you can define the animation to do many different stuff.
I hope this helps you out, and let me know if need to clarify something.

Related

Style.transform JAvascript DOM property not working [duplicate]

I'm working on CSS and web development,but just face a something which i really don't understand it:
.header{
position: absolute;
width:60%;
top: 20%;
left: 50%;
transform: translateX(-50%);<------ executed after animation
text-align: center;
animation: moveUp 2s;
animation-fill-mode: backwards;
}
#keyframes moveUp{
0%{
opacity: 0;
transform:translateY(2rem);
}
100%{
opacity: 1;
transform: translateY(0rem);
}
}
so my problem here is the indicated line doesn't apply on ".header" until the animation gets applied in other word it applies animation first then translate -50% ,is there a priority of execution here or it is different thing?
Usually the styles are parsed from top to bottom, however this isn't the issue here.
What is happening in your case is the transform is being applied initially, but then it is being overridden by the animation. Once the animation is over, the element is reverting back to its default style which has the transform.
Essentially, even though the transform is applied at first, you don't see it until the element reverts to it after the end of the animation.
The only solution if you want to have the transform during the animation, is to include it in the animation itself.
#keyframes moveUp {
0 % {
opacity: 0;
transform: translate(-50%, 2rem);
}
100 % {
opacity: 1;
transform: translate(-50%, 0);
}
}
EDIT: To clarify, the order at which the styles are applied does not matter. Whether the animation or the transform is applied first, the result will be the same.
I think a source of your confusion is that the first transform is a translateX while the animation only does translateY. In both cases what is changing is the value of the transform property of the element. Therefore which axis the translation is on doesn't matter. First you set transform: translateX(-50%), but then once the animation kicks in, transform becomes translateY(2rem). The translateX part is removed from the transform, unless you include it in the animation like I have shown.

Change value of translateX and size of element based on size of parent element OR size of window

I hope that this question is not too specific so it can relate to others problems...
I have two elements, a child and a parent, with the child element rotating around the parent using CSS animations.
<div class="planet">
<div class="moon"></div>
</div>
The moons animation is set so the moon will load ontop of the planet in the same position, but is pushed out with translateX then roatated, like so:
#keyframes myOrbit {
from { transform: rotate(0deg) translateX(200px) rotate(0deg); }
to { transform: rotate(360deg) translateX(200px) rotate(-360deg); }
}
Think of it as a planet with a moon rotating around the planet.
When the user resizes the window the planets height/width will resize, but I also need the moons height/width to resize AND the distance between it and the planet needs to lower.
I have set up an example here... https://codepen.io/anon/pen/mVvYbR
Would this be possible to acheive with just CSS, or would javascript be needed? I will use jQuery if need be, (I am not great at it though) but I would think a pure CSS solution would be cleaner... maybe I'm wrong on that one.
I should also note that the way it is set up currently (with the planet div holding the moon, is so that I can have multiple children (multiple moons). However I also think that this would mean having a massive amount of different animations for moons/planets which need different translateX's... So maybe jQuery is a better solution there...
If I am not clear on anything please let me know.
Thank you!
You can try do it with just css. You can use viewport units so all values will depend on viewport size.
.planet {
width: 10vw;
height: 10vw;
background: url(http://placehold.it/940x940) no-repeat center center;
background-size: contain;
z-index: 1;
}
.moon {
position: absolute;
background: url(http://placehold.it/140x140) no-repeat center center;
background-size: contain;
width: 5vw;
height: 5vw;
-webkit-animation: myOrbit 20s linear infinite;
-moz-animation: myOrbit 20s linear infinite;
-o-animation: myOrbit 20s linear infinite;
animation: myOrbit 20s linear infinite;
}
#keyframes myOrbit {
from { transform: rotate(0deg) translateX(20vw) rotate(0deg); z-index:1}
to { transform: rotate(360deg) translateX(20vw) rotate(-360deg); z-index:2}
}
Sample -> here
Probably you will need to add some media queries to handle different screen aspect ratios. Current viewport units support -> caniuse.com

background transition fix and background dim on hover [fiddle inside]

I got completely stuck on this. I have a container with background image. Inside the container are 3 little circles. What I am trying to do is to zoom the background image when I hover over it and dim the background image when I hover over any of the 3 little circles.
I got to the point where the 3 circles are properly overlapping the container and the background zooms in on hover. But I have 2 issues
no. 1 I am not very fond of the way I am achieving the overlay of the circles, which is this code
#circle_wrap{
position: absolute;
margin-top: -130px;
}
no. 2 Is that I have no clue how to dim the background. My original intention was to have a hidden black conteniner with 0.5 opacity that would be displayed when I hover over one of the circles. But I couldn't figure out how to select the overlay.
JSFIDDLE here
If anything couldn't be solved with css only, I'd accept jquery solution as well.
I'm looking for any advice/tips/solutions you guys have, I really need to get this working.
Thank you.
Finally got so angry I am not able to do it with css that I made it with jquery :(
If anyone is interested here is the result
I have at least fixed the issue no1 with better css but the second is done with jquery.
solved no.1 with
.circle_wrap{
position: absolute; bottom: 0; width: 100%; height: 100px;
}
and applying position:relative on its parent
and the solution for no.2 is
$(".circle_wrap").hover(function () {
$(this).siblings("img").css("opacity", "0.2");
},
function () {
$(this).siblings("img").css("opacity", "1");
});
EDIT: safari support
.wrap img:hover{
-moz-transition: scale(1.1) rotate(0deg);
transform: scale(1.1) rotate(0deg);
-webkit-animation-name: scaleThis;
-webkit-animation-duration:5s;
-webkit-animation-iteration-count: 1;
-webkit-animation-timing-function:ease-in-out;
}
#-webkit-keyframes scaleThis {
0% { -webkit-transform:scale(1) rotate(0deg); }
10% { -webkit-transform:scale(1.1) rotate(0deg); }
100% {-webkit-transform:scale(1.1) rotate(0deg); }
}

How to zoom in to the center of a div

I want to create a zoom in effect on my large div. I have searched many questions and still don't know how this work.
I want to be able to zoom into the center of the user screen instead of the set position.
http://jsfiddle.net/kB27M/1/
I have tried css3 zoom feature and animate zoom property but still can't pull this one. Can anyone help me about it? Thanks a lot!
You should scale the div:
.scaled {
-moz-transform: scale(3);
-webkit-transform: scale(3);
-ms-transform: scale(3);
transform: scale(3);
}
div {
transition: all 500ms ease-in;
}
Simply apply the CSS class to the div and then use the transitionEndevent to apply further styles via .animate().
On transitionEnd (discard live(), use on()): jsfiddle

Pre-Rendering an animation on a canvas in javascript

I have a web app that uses the canvas to animate a tree that is drawn onto the screen. It does so by doing several trig calculations in a row. When you click the "grow" button there is an animation of a tree growing that has the certain attributes that the user can change. You can see the application here http://pastehtml.com/view/c85mxfgcj.html.
The problem is, if you set the "age" (the number of iterations to go through) too high, the animation starts to lag due to the calculations that the computer has to do. I was wondering two things:
Is there a way to pre-render the animation before it is shown to the user?
Is there a way to make it so that if I have a tree that has already been rendered and I wanted to animate it moving around the screen I could do that without having to re-draw the tree every single frame?
Thanks.
1: you might want to look into var fragment = document.createDocumentFragment();
2: yes via css, is much faster!
I think this youtube video will be worth your while.
Good luck
UPDATE: 9 Jan 2013
Just stumbled over this.
In css3 there is a animation feature using steps.
Basically you create a sprite (in canvas) and then use css3 to animate the sprite using a background-property on a element. Pretty cool (and should use the optimized browser's own code to do this, thus not load the users cpu as much as with javascript/canvas).
It's still not creating a animated gif however (but I think even that should be possible, using a library, since gif and pnp are quite alike, and then feed that gif using the data:image/gif protocol), but the end result still looks the same in the (modern) browser.
HTML:
<div class="hi"></div> or <img src="transparent.gif" class="hi">
CSS3:
.hi {
width: 50px;
height: 72px;
background-image: url("http://files.simurai.com/misc/sprite.png");
-webkit-animation: play 1s steps(10) infinite;
-moz-animation: play 1s steps(10) infinite;
-ms-animation: play 1s steps(10) infinite;
-o-animation: play 1s steps(10) infinite;
animation: play 1s steps(10) infinite; }
#-webkit-keyframes play { from { background-position: 0px; }
to { background-position: -500px; } }
#-moz-keyframes play { from { background-position: 0px; }
to { background-position: -500px; } }
#-ms-keyframes play { from { background-position: 0px; }
to { background-position: -500px; } }
#-o-keyframes play { from { background-position: 0px; }
to { background-position: -500px; } }
#keyframes play { from { background-position: 0px; }
to { background-position: -500px; } }
Example jsfiddle.

Categories