i have a svg icon with three parts, the fb logo, a ring of dashes which is currently set to not visible and an outer ring. the outer ring is the problem. i am using the hover psuedo selector to expand the ring with the scale() property. it scales fine, the problem is that it shoots off to the right instead of just staying put in the center. according to what i have read using transform-origin: center center or 50% 50% should fix it (and it has on the other logos ive been working on) it does not in this instance.
heres the pen the relevant code starts on line 24
https://codepen.io/cole-pratt/pen/poJJdzy?editors=1100
.facebook-outline, .facebook-detail {
transition: 300ms all;
transform-origin: center center;
}
.facebook-detail {
opacity: 0;
}
.facebook-icon-group:hover {
.facebook-outline {transform: scale(1.8); opacity: 0;}
}
You're right the default is not to scale from the centre it's to scale the viewBox. You can fix that by adding
transform-box: fill-box;
e.g.
.facebook-outline, .facebook-detail {
transition: 300ms all;
transform-origin: center center;
transform-box: fill-box;
}
.
Related
I wanna rotateY() but from center of this earth image. Now it's rotating from the right side. Here is my code:
#keyframes rotate {
to {
transform: rotateY(-360deg);
}
}
http://jsfiddle.net/qwrg9684/
It works if you operate on the image directly. https://jsfiddle.net/akso4r6q/
<img id="logo" src="http://upload.wikimedia.org/wikipedia/commons/thumb/e/ef/Erioll_world_2.svg/256px-Erioll_world_2.svg.png" />
#logo {
animation: rotate 5s linear infinite;
transform-origin: center center;
}
#keyframes rotate {
to {
transform: rotateY(360deg);
}
}
If you need it to be in a div you can also set display: inline-block;. The appearance of rotating around the right side of the image is actually the rotation happening around the center of the enclosing div which is expanding horizontally to fit the viewport.
You can see a fiddle here that shows this with a text element that is a sibling of the image.
I'm trying to make a loading spiner with icon from https://materialdesignicons.com/ but the icon doesn't just rotate, it also moves slightly from the center.
I have these styles:
#keyframes spin-animation {
to {
-webkit-transform: rotate(360deg);
transform: rotate(360deg);
}
}
.spin:before {
display: block;
transform-origin: center center;
-webkit-backface-visibility: hidden;
-webkit-animation: spin-animation 2s linear infinite;
animation: spin-animation 2s linear infinite;
}
It's <i class="mdi mdi-something spin"> element. So it has added :before with content of the icon.
This element sits in an absolutely positioned wrapper, with display: flex, horizontally and vertically centered.
The problem is that when the icon rotates, it doesn't rotate around its center. The axis moves by a little. The icon doesn't stay in one centered position, instead it moves slightly.
I've tried:
Giving width and height to the i element
Giving width and height to the :before element
Moving the spiner animation from i to :before
Different styles which I've found on stackoverflow, e.g. transform-origin: center center;
The icon itself has the same x and y dimensions so it shouldn't be a problem. The dimensions change when it rotates, but I guess that's correct?
Have a look at Gabriele Petrioli answer in this thread: https://stackoverflow.com/a/14859567/1374439 on how to implement spin with CSS3.
Based on his suggestion the below worked perfectly for me.
#keyframes spin {
from {
transform:rotate(0deg);
}
to {
transform:rotate(360deg);
}
}
.spin {
animation-name: spin;
animation-duration: 4000ms;
animation-iteration-count: infinite;
animation-timing-function: linear;
}
It is now 2021, use mdi-spin
Example:
mdi mdi-loading mdi-spin
I'm learning CSS and playing with TranslateY
I have reached an issue. When I hover my mouse over a div, a JavaScript event (mouseover) is fired and simply appends this CSS class and as desired, the new element slides in from below
.slideIn{
animation: slide-in 0.5s forwards;
}
#keyframes slide-in {
0% { transform: translateY(100%); }
100% { transform: translateY(0%); }
}
The first observation I have is my numbers appear backwards. When it's at 0%, translate (meaning move along the Y axis) 100%. To me the CSS reads as if it starts in position then moves down to position 0%.
However what I'd like to achieve is when this elements slides in, is if I hover the mouse over this new element, it grows by a little. I would suspect something like
.growMore{
animation: grow-more 0.5s forwards;
}
#keyframes grow-more {
0% { height:100%; }
100% { height: 150%; }
}
I did try adding another TranslateY but it also gave no result, hence why I tried with height
Is this possible?
When using CSS bounce key-frames i have set the top of the bounce to 870px, but if I re-size the window the object can bounce past the border of the window, is there any way to change the bounds with the screen size.
#-webkit-keyframes bounce{
from, to{
top: 0;
-webkit-animation-timing-function: ease-in;
}
50%{
top: 870px; /*value in question*/
-webkit-animation-timing-function: ease-out;
}
}
Using view-port units allowed the animation to scale to the screen size. credit to #Manoj Kumar for introducing me to them.
I am trying to implement a CSS-based animation involving a single Unicode character:
HTML
<div class="spinner">⊗</div>
CSS
.spinner {
display: inline-block;
font-size: 42pt;
margin: 50px;
animation: spin 0.5s infinite linear;
}
#keyframes spin {
to { transform: rotate(360deg); }
}
* I've omitted the vendor-specific prefixes in this example.
However, when I view the page in my browser (Firefox 20.0), the character is slightly off-center, resulting in a "wobbly" animation.
You can see it live here: http://jsfiddle.net/bBaVN/77/
How can I completely center the character?
Proof of Concept using SVG
Consider the following:
<div class="wrap">
<span class="spinner">
<svg {...many other attributes...} class="logo">
...path code...
</svg>
</span>
</wrap>
See the fiddle: http://jsfiddle.net/audetwebdesign/3G3U7/
I found a SVG version of the symbol at:
http://www.fileformat.info/info/unicode/char/2297/index.htm
I had to take the SVG, open it in Adobe Illustrator and then reset the view port (bounding box?) using object->artboards->fit to artwork bounds.
I then saved as SVG and then cut-paste the <svg> block into the demo, and finally, I added the class="logo" attribute to the <svg> tag.
For styling, I used the following CSS:
.spinner {
display: block;
width: 50px;
height: 50px;
position: relative;
top: 75px;
left: 75px;
animation: spin 1s infinite linear;
}
.logo {
display: block;
width: 50px;
height: 50px;
}
I set the display type to block for both .logo and .spinner, and both have the same height and width (use a square box for best results.
Seems to work. The hardest part was learning how to set up the SVG inline image. I found the following reference useful: http://css-tricks.com/using-svg/
You could set the line-height to 45px on .spinner, this will ensure that the containing span element is as high as it is wide. Here's a jsFiddle. Now there is a little less movement, but it still doesn't look like it is not moving around at all.
Another way to get it to rotate around the center of character instead of around the center of the containing span would be to play around with -vendorspecificprefix-transform-origin. You could set it to rotate around another point e.g. setting it to: 23px 34px would set the x and y coordinates for the point to rotate around.
I think the fact that it still looks like it moves around a little bit might be due to the character not being rendered as a perfect circle, you could try rendering it in a different font, changing point sizes of the font, or even turning text-rendering: optimizelegibility; on or off might make a difference there.
The default value for -vendorspecificprefix-transform-origin is 50% 50%, this suggests that if you make sure that the character inside the element is perfectly centered, and you set the animation on the containing element, it should rotate exactly around the the center, and then playing with -vendorspecificprefix-transform-origin would only make things worse.
Another thought I'm having, by setting the point size of the text to 42pt, the width of the containing span becomes 45px, now 50% of that would be 22.5px, maybe it would work if you made the point size of the text a bit bigger, or just set the width and the height of the containing span to 46px, then 50% would be 23px, which might make the difference with the current movement.
Update:
I was able to get it to be centered perfectly in Chrome (and in FireFox) by using a mono-space font Courier, manually setting the line-height, height and width of the span to center the character, and then forcing the character to look more like a circle by moving it over by 0.5px using -webkit-transform: translate().
.spinner {
display: inline-block;
font-size: 42pt;
line-height: 50px;
height: 46px;
width: 46px;
margin: 50px;
-webkit-animation: spin 1s infinite linear;
-moz-animation: spin 1s infinite linear;
-ms-animation: spin 1s infinite linear;
-o-animation: spin 1s infinite linear;
animation: spin 1s infinite linear;
font-family: courier;
}
#-webkit-keyframes spin {
from { -webkit-transform: rotate(0deg) translate(0.5px, 0px)}
to { -webkit-transform: rotate(360deg) translate(0.5px, 0px)}
}
I think the fact that I need 2 jsFiddle's to demonstrate for different browsers kind of answers the question about if you should be doing it this way, I think the differences in font-rendering between browsers will ensure that you can't do this reliably without browser detection.