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!
Related
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
It seems that generally a css clip-path is used to hide beginning at the edges of an element. I can use something like this:
clip-path:circle(70% at center);
and get something like this:
Is there a way I can invert that? I want my result to be something like this:
I want to clip the center of the image, not the edges. It's an SVG, so I tried something like this pen, animating a radial gradient: http://codepen.io/ethanclevenger91/pen/myMYwQ
But that didn't work like expected. There's the animated one and then one with what I assume the final step of the animation cycle should look like, but it doesn't. Any light on either of these would be appreciated.
You can use a still use a clipPath if you use it in its url form i.e. as svg markup. Draw the path outer rectangle clockwise and the inner ellipse (using two or more elliptical arcs) anticlockwise, drawing everything as a single path together with clip-rule="evenodd"
Alternatively you could use a <mask>. This is a simpler, but slower solution. Draw a white ellipse within the mask area and that part of the mask will be opaque.
So here's what ended up happening:
Since the background I was trying to match was a solid color, I gave the circles a stroke double their radius (since stroke is applied centered on the edge of the object) and then applied a clip-path the size of the object. Then I animated the stroke to 0. Will update with a link to the application when it's live.
CSS3 Pie has some odd functionality when styling select tags. The border radius and box shadow seem to apply the effect and then place the non-styled select box overtop of the effect. Is this an issue anyone has come across and worked around before?
I was actually having this issue, but figured out a fix.
Initially, with
behavior: url(stylesheets/PIE.htc);
the select would open at first, but if I applied a class of error on it with javascript during validation to make the border and background color change to red, it would no longer open properly. To get it to still work properly, you need to add 3 additional pie properties to the select. After adding
.ie select{
behavior: url(stylesheets/PIE.htc);
-pie-poll:false;
-pie-track-hover:false;
-pie-track-active:false;
}
I was able to get it to work and function 100% properly.
Do you mean to style it like this? http://jsfiddle.net/Tmzjz/1/
If you check this in IE7/8, the select box will not function properly.
When you need rounded corners and box shadows for select box, it is better to use a javascript method - http://cssglobe.com/custom-styling-of-the-select-elements/
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 using -webkit-transform: rotate(40 deg) and it seems that the rotated element is hiding parts of elements which are on top ( not children ) of the rotated one.
I created a jsFiddle here with the code, since it will be easier to demonstrate.
Probably this is because the rotated element hides parts of other elements, but I don't want this effect. How can I fix that?
I used z-index but it doesn't help!
You're doing a 3D transform. You have 'rotateY' in the fiddle not 'rotate'.
So you're moving part of the plane in front of the buttons.
Check for yourself by changing code for the second button to
$("div.buttonB").click( function() {
$("div.background").css('-webkit-transform', 'rotateY(-190deg)')
});
This way after clicking buttonB, buttonB will be clickable but buttonA won't.
Now change -190deg to 190deg and you'll see that it works other way around.
If you want to wrap your head around 3D transformations check out this site.
http://thewebrocks.com/demos/3D-css-tester/
Watch the video and play with the controls. Hope this helps.