I have a less class as a function. I use calc() to set scale value, it working on chrome but not Firefox. this is my class:
.zoom(#value) {
transform: scaleX(#value);
-moz-transform: scaleX(#value);
-ms-transform: scaleX(#value);
-webkit-transform: scaleX(#value);
transform-origin: 0;
.blocFreq {
&:before {
-webkit-transform: scaleX(calc(1/#value)) !important;
-moz-transform: scaleX(-moz-calc(1/#value)) !important;
-ms-transform: scaleX(calc(1/#value)) !important;
transform: scaleX(calc(1/#value)) !important;
}
}
span.frequence {
-webkit-transform: scaleX(calc(1/#value))rotate(-44deg) !important;
-moz-transform: scaleX(-moz-calc(1/#value))rotate(-44deg) !important;
-ms-transform: scaleX(calc(1/#value))rotate(-44deg) !important;
transform: scaleX(calc(1/#value))rotate(-44deg) !important;
}
.text,
.text-service,
.popover {
-webkit-transform: scaleX(calc(1/#value)) !important;
-moz-transform: scaleX(calc(1/#value)) !important;
-o-transform: scaleX(calc(1/#value)) !important;
-ms-transform: scaleX(calc(1/#value)) !important;
transform: scaleX(calc(1/#value)) !important;
}
}
Try to remove calc function and use only (1/#value). I think that will fix your bug.
Related
I have never done animations in CSS, what I'm trying to get is something like cog's animations two circles spinning, one to the right and the other to the left without overlapping...
I think I got the animation(sort of) but not the drawing I think..
I have this demo: https://jsfiddle.net/Tankers/8dxh94zp/9/
the "figures" are correct and the location also correct but the animation is not.
when they spin it overlaps may be is because the object are not 100% squares?, what need to be visible is just half circles just the way that is in my demo..
HTML
<div class="wrap">
<div class="top"></div>
<div class="bott"></div>
</div>
CSS
#keyframes half_spin {
0% {
-ms-transform: rotate(0deg);
-moz-transform: rotate(0deg);
-webkit-transform: rotate(0deg);
-o-transform: rotate(0deg);
transform: rotate(0deg);
}
40% {
-ms-transform: rotate(20deg);
-moz-transform: rotate(20deg);
-webkit-transform: rotate(20deg);
-o-transform: rotate(20deg);
transform: rotate(20deg);
}
60% {
-ms-transform: rotate(0deg);
-moz-transform: rotate(0deg);
-webkit-transform: rotate(0deg);
-o-transform: rotate(0deg);
transform: rotate(0deg);
}
80% {
-ms-transform: rotate(-20deg);
-moz-transform: rotate(-20deg);
-webkit-transform: rotate(-20deg);
-o-transform: rotate(-20deg);
transform: rotate(-20deg);
}
100% {
-ms-transform: rotate(0deg);
-moz-transform: rotate(0deg);
-webkit-transform: rotate(0deg);
-o-transform: rotate(0deg);
transform: rotate(0deg);
}
}
.wrap {
display: block;
overflow: hidden;
position: relative
}
.top {
width: 300px;
height: 150px;
border: 1px solid red;
border-bottom-left-radius: 151px;
border-bottom-right-radius: 151px;
position: relative;
animation: half_spin 5000ms ease-in-out infinite;
}
.top:before {
position: absolute;
width: 100%;
height: 1px;
background: red;
content: " ";
top: 0;
left: 0;
}
.bott {
width: 300px;
height: 150px;
border: 1px solid black;
border-top-left-radius: 151px;
border-top-right-radius: 151px;
animation: half_spin 5000ms ease-in-out infinite reverse;
position: relative;
}
.bott:before {
position: absolute;
width: 100%;
height: 1px;
background: black;
content: " ";
bottom: 0;
left :0;
}
If I understand your question correctly, this code snippet is what you're looking for. I added a transform-origin property to both the top and bottom half-circles to specify the point that we're rotating around.
Both divs should rotate around the midpoint of their flat edge, for the top that is transform-origin: 50% 0%; and for the bottom it is transform-origin: 50% 100%;
#keyframes half_spin {
0% {
-ms-transform: rotate(0deg);
-moz-transform: rotate(0deg);
-webkit-transform: rotate(0deg);
-o-transform: rotate(0deg);
transform: rotate(0deg);
}
40% {
-ms-transform: rotate(20deg);
-moz-transform: rotate(20deg);
-webkit-transform: rotate(20deg);
-o-transform: rotate(20deg);
transform: rotate(20deg);
}
60% {
-ms-transform: rotate(0deg);
-moz-transform: rotate(0deg);
-webkit-transform: rotate(0deg);
-o-transform: rotate(0deg);
transform: rotate(0deg);
}
80% {
-ms-transform: rotate(-20deg);
-moz-transform: rotate(-20deg);
-webkit-transform: rotate(-20deg);
-o-transform: rotate(-20deg);
transform: rotate(-20deg);
}
100% {
-ms-transform: rotate(0deg);
-moz-transform: rotate(0deg);
-webkit-transform: rotate(0deg);
-o-transform: rotate(0deg);
transform: rotate(0deg);
}
}
.wrap {
display: block;
overflow: hidden;
position: relative
}
.top {
width: 300px;
height: 150px;
border: 1px solid red;
border-bottom-left-radius: 151px;
border-bottom-right-radius: 151px;
position: relative;
animation: half_spin 5000ms ease-in-out infinite;
transform-origin: 50% 0%;
}
.top:before {
position: absolute;
width: 100%;
height: 1px;
background: red;
content: " ";
top: 0;
left: 0;
}
.bott {
width: 300px;
height: 150px;
border: 1px solid black;
border-top-left-radius: 151px;
border-top-right-radius: 151px;
animation: half_spin 5000ms ease-in-out infinite;
position: relative;
transform-origin: 50% 100%;
}
.bott:before {
position: absolute;
width: 100%;
height: 1px;
background: black;
content: " ";
bottom: 0;
left :0;
}
<div class="wrap">
<div class="top">
</div>
<div class="bott">
</div>
</div>
I'm looking for solution to my problem. I want to zoom in and out without stoping every second in a div with backgroung-image.
Something like this fruit in the game:
https://www.google.co.il/search?source=hp&ei=ghU7XfaEBai4gwfA6rrIDA&q=snake&oq=snaj&gs_l=psy-ab.1.0.35i305i39j0i10l9.776.1740..2868...0.0..0.192.754.0j5......0....1..gws-wiz.....0..35i39j0i131j0j0i67.KPZVLy3h8CU
I find the solution below but I use react so I need css/js solution and not jQuery one.
Zoom an image every one second jQuery
The solution is to use CSS "breathing" animation. An example how it works:
#breathing-button {
width: 270px;
padding: 20px;
margin: 50px auto;
border: 1px solid #d1d1d1;
-webkit-animation: breathing 7s ease-out infinite normal;
animation: breathing 7s ease-out infinite normal;
font-size: 24px;
background: #5885cb;
color: #fff;
-webkit-font-smoothing: antialiased;
border-radius: 3px;
text-align: center;
}
#-webkit-keyframes breathing {
0% {
-webkit-transform: scale(0.9);
transform: scale(0.9);
}
25% {
-webkit-transform: scale(1);
transform: scale(1);
}
60% {
-webkit-transform: scale(0.9);
transform: scale(0.9);
}
100% {
-webkit-transform: scale(0.9);
transform: scale(0.9);
}
}
#keyframes breathing {
0% {
-webkit-transform: scale(0.9);
-ms-transform: scale(0.9);
transform: scale(0.9);
}
25% {
-webkit-transform: scale(1);
-ms-transform: scale(1);
transform: scale(1);
}
60% {
-webkit-transform: scale(0.9);
-ms-transform: scale(0.9);
transform: scale(0.9);
}
100% {
-webkit-transform: scale(0.9);
-ms-transform: scale(0.9);
transform: scale(0.9);
}
}
<div id="breathing-button">Breathing Button</div>
I have a wordpress site which i am helping a friend out with
https://capturingscotland.com/galleries
When hovering over the gallery images it shows a transparent red image with a more button. It works fine in chrome, IE, Firefox but when i have tried it on iphones and Ipads with safari it dosent seem to work. Below is the CSS classes used. porto-item is the gallery item
.porto .porto-item:hover img {
-webkit-transform: scale(1.2);
-ms-transform: scale(1.2);
transform: scale(1.2);
opacity: .2;
}
.porto .porto-item:hover .porto-info {
opacity: 1;
box-sizing: border-box;
height: 100%;
-webkit-transform: scale(1);
-ms-transform: scale(1);
transform: scale(1);
}
.porto .porto-item:hover .title {
opacity: 1;
-webkit-transform: scale(1);
-ms-transform: scale(1);
transform: scale(1);
text-shadow: 0 0 0 white;
}
.porto .porto-item:hover .categories {
opacity: 1;
-webkit-transform: scale(1);
-ms-transform: scale(1);
transform: scale(1);
text-shadow: 0 0 0 white;
}
.porto .porto-item:hover .more {
opacity: 1;
-webkit-transform: scale(1);
-ms-transform: scale(1);
transform: scale(1);
text-shadow: 0 0 0 white;
}
If you want it so that whenever the item is touched the hover appears (like if scrolling) then you can add: cursor: pointer; to the element you wish the hover to appear on. Without this iOS only styles :hover events on links.
I have added a background image to a div, but because the div has been rotated, so has the background-image. How can I rotate just the image the opposite way to it appears straight?
live url: http://bit.ly/1iqXQRN
html
<section id="about-hero-img"></section>
css
#about-hero-img {
-webkit-transform: rotate(-2deg);
-moz-transform: rotate(-2deg);
-o-transform: rotate(-2deg);
-ms-transform: rotate(-2deg);
transform: rotate(-2deg);
width: 1030px; margin-left: -50px; margin-top: 20px; height: 200px; background-image: url('../Images/about-header-img.jpg'); padding-top: 30px; }
Move the background-image to a the :before pseudo-element of you header
#about-hero-img {
-webkit-transform: rotate(-2deg);
-moz-transform: rotate(-2deg);
-o-transform: rotate(-2deg);
-ms-transform: rotate(-2deg);
transform: rotate(-2deg);
width: 1030px;
margin-left: -50px;
margin-top: 20px;
height: 200px;
/* background-image: url('../Images/about-header-img.jpg'); */
padding-top: 30px;
position: relative;
}
#about-hero-img:before {
width: 1030px;
height: 230px;
position: absolute;
left: 0;
top: 0;
content: ' ';
background-image: url('../Images/about-header-img.jpg');
-webkit-transform: rotate(2deg);
-moz-transform: rotate(2deg);
-o-transform: rotate(2deg);
-ms-transform: rotate(2deg);
transform: rotate(2deg);
}
This is my code and transform is working in chrome browser but in firefox it is not working.
.delete-white a:before {
background: none repeat scroll 0 0 #FFFFFF;
height: 15px;
left: 6px;
margin-top: -7px;
width: 5px;
-webkit-transform: rotate(45deg) scale(1);
-moz-transform: rotate(45deg) scale(1);
-o-transform: rotate(45deg) scale(1);
-ms-transform: rotate(45deg) scale(1);
}
.delete-white a:after {
background: none repeat scroll 0 0 #FFFFFF;
height: 5px;
left: 1px;
margin-top: -2px;
width: 15px;
-webkit-transform: rotate(45deg) scale(1);
-moz-transform: rotate(45deg) scale(1);
-o-transform: rotate(45deg) scale(1);
-ms-transform: rotate(45deg) scale(1);
}
Two notes
You need to have content to :before/:after pseudo elements
You have forgotten the unprefixed version: transform: rotate(45deg) scale(1);
Add this rule to element: "display: inline-block;"
You need to include the standard, non-prefixed version (i.e. transform: rotate(45deg) scale(1);) as the final definition in your list of transforms. The -moz one is deprecated, as will/should be the other ones in time. See the MDN for reference.