I'm trying to make an animation with CSS. I need to rotate the images following the lines in the orbit, is not a circle. Its like a ellipse.
Like this image.
Image showing how should be the movement
Here is some demo of what I managed to do
https://codesandbox.io/s/orbit-animation-xhw3o
Any help will be appreciate =D
You can extract the orbits d property from your header-image.svg file, and use them as CSS motion paths.
https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Motion_Path
Related
I'm trying to build a Flower of Life VR example using A-Frame.
The closest thing that I found is using the opacity property in <a-circle>.
Is there a way to create just the border of the circle?
Not sure if it fits your use case but you could use a cylinder with a small height:
https://aframe.io/docs/1.0.0/primitives/a-cylinder.html
Or a tube:
https://github.com/donmccurdy/aframe-extras/tree/master/src/primitives
Or just a flat plane with png texture with a circle with transparency
i am trying to create the following image using css.... so far i've got this after googling a bit http://jsfiddle.net/w9Zgc/ and i want to make the following shape..
is there any way this can be done... any help would be appreciated.. oh and i would like the shadow to be like the one here... http://jsfiddle.net/w9Zgc/
So I managed to create an icon that renders more or less the same in all current browsers. I had to use an extra useless span, unfortunately.
http://codepen.io/myajouri/full/nJDzl
The triangle is made of two parts:
the upper (triangular) part is a transformed (skewed and rotated) square with rounded corners.
the bottom of the triangle is the bottom part of a rectangle with rounded corners.
Both parts are cut and joint at certain places to form the triangular shape with rounded corners and shadows.
I'm trying to create a grid of cubes that have a perspective that looks like you're looking at them from the top. Here is an example
http://imgur.com/elyJ5tu
This one is made by calculating how far the cube is from the middle and changing the border size. I want to make my own texture on the sides of the cube so I used CSS3 rotation to create the six sides of the cube and position them correctly to form a cube. Now I tried to recreate the effect by having the cubes tilt over the x and y axis depending on how far they are from the center and i got this:
http://codepen.io/anon/pen/yKmwg
As you can see it looks like they're on some kind of spherical surface. This is because the front and back side of the cube should not be rotating. Does anyone know of the proper way to do this. Thanks
Thank you #jozzas perspective origin was what i was looking for:
http://codepen.io/avovk/pen/yICrt
how can i create a ribbon like this that sits on corner of my boxes and it is rotated too with css and without images.
i know that exits some tools and tutorials like this and this that makes ribbons easily with css.
but all of those are horizontal type while i want to create a rotated one.
Once you follow those tutorials to create a horizontal ribbon, use CSS3 Transform (Rotation) to rotate the ribbon: http://davidwalsh.name/css-transform-rotate
http://jsfiddle.net/R6jMH/ Have a look
I'm trying to create a "door opening" 3D effect in CSS but I just can't do it. The problem is that using rotateY() function makes the element spin. You can check it here http://jsfiddle.net/uC4du/1/
Do you know how to change the rotateY "reference axis"? What should I do to make the element rotate using its left corners as reference?
You can use 'transform-origin' property ( http://www.w3schools.com/cssref/css3_pr_transform-origin.asp ).
Set it to something like: "-webkit-transform-origin: 0% 50%;"
Here is your example using that property: http://jsfiddle.net/aV76H/
Hope it helps!