<asp:ImageButton ID="Bt_1" runat="server" CausesValidation="false" CssClass="clr_bt" />
.clr_bt
{
-webkit-transform: rotate(-50deg);
-webkit-transition: -webkit-transform 0.5s ease-in;
}
Can some one please help me fix it for Opera, IE, Mozilla.
For a moment working only for Chrome.
You have to add the vendor prefixes for the browsers to your css like this:
.clr_bt {
-webkit-transform: rotate(-50deg);
-moz-transform: rotate(-50deg);
-ms-transform: rotate(-50deg);
-o-transform: rotate(-50deg);
transform: rotate(-50deg);
-webkit-transition: 0 .5s ease-in;
-moz-transition: 0 .5s ease-in;
-o-transition: 0 .5s ease-in;
transition: transform .5s ease-in;
}
webkit prefix is added for Chrome and Safari
moz prefix is added for Firefox
ms prefix is added for IE
o prefix is added for Opera
Related
I want to make element "tilt" on my page, to be more precise I have an .svg image (size 100px 100px) so I have these two css classes, and I have some strange effect, some small white line in upper left corner.
I have tried to add
-webkit-backface-visibility:hidden;
but it solws problem only in Chrome if I dont hover while page is loading.
.tilt {
-webkit-transition: all 0.5s ease;
-moz-transition: all 0.5s ease;
-o-transition: all 0.5s ease;
-ms-transition: all 0.5s ease;
transition: all 0.5s ease;
}
.tilt:hover {
-webkit-transform: rotate(-50deg);
-moz-transform: rotate(-500deg);
-o-transform: rotate(-50deg);
-ms-transform: rotate(-50deg);
transform: rotate(-50deg);
}
Basically what I'm looking for is to be able to make an image do a rotation of 360 degrees and enlarge the image, I already have these two down.
What I need to do now is, work out how to actually make it rotate 360 degrees and enlarge to a different image, here's the css that I have:
.rotate img {
-moz-transition: all 0.6s ease-in-out;
-webkit-transition: all 0.6s ease-in-out;
-o-transition: all 0.6s ease-in-out;
-ms-transition: all 0.6s ease-in-out;
transition: all 0.6s ease-in-out;
}
.rotate img:hover {
cursor: crosshair
-moz-transform: rotate(360deg) scale(1.25);
-webkit-transform: rotate(360deg) scale(1.25);
-o-transform: rotate(360deg) scale(1.25);
-ms-transform: rotate(360deg) scale(1.25);
transform: rotate(360deg) scale(1.25);
}
This code works fine, all I need to know is how to make it turn into a different image.
If you can use a <div> with a background image rather than an actual <img> you can do it with css pretty easily.
Working Example
.rotate {
background: url("http://lorempixel.com/output/abstract-q-c-100-100-7.jpg") no-repeat;
height: 100px;
width:100px;
-moz-transition: all 0.6s ease-in-out;
-webkit-transition: all 0.6s ease-in-out;
-o-transition: all 0.6s ease-in-out;
-ms-transition: all 0.6s ease-in-out;
transition: all 0.6s ease-in-out;
}
.rotate:hover {
background: url("http://lorempixel.com/output/abstract-q-c-100-100-8.jpg") no-repeat;
cursor: crosshair;
-moz-transform: rotate(360deg) scale(1.25);
-webkit-transform: rotate(360deg) scale(1.25);
-o-transform: rotate(360deg) scale(1.25);
-ms-transform: rotate(360deg) scale(1.25);
transform: rotate(360deg) scale(1.25);
}
It can be done with some JavaScript added in... Also - rotate 2 divs rather than the img. Place one image in each div, over the other. As you rotate, fade the overlapping div (change the opacity) to 100%. This will give you the effect of fading one image into the next.
http://jsfiddle.net/x3Kc7/1/
.play {
border-radius: 50px;
height: 90px;
width: 90px;
transition: all .2s ease-out, background 2s ease-in;
-o-transition: all .2s ease-out, background 2s ease-in;
-ms-transition: all .2s ease-out, background 2s ease-in;
-moz-transition: all .2s ease-out, background 2s ease-in;
-webkit-transition: all .2s ease-out, background 2s ease-in;
-moz-box-shadow: 0 0 5px #888;
-webkit-box-shadow: 0 0 5px #888;
box-shadow: 0 0 5px #888;
}
.play:hover {
transform: scale(1.2);
}
This code works perfectly in firefox, however not in chrome. What is incorrect?
You need the -webkit vendor for the transform property: -webkit-transform: scale(1.2), as it isn't supported in Chrome otherwise. Same goes for other -webkit browsers like Safari.
jsFiddle example - works in Chrome.
.play:hover {
transform: scale(1.2);
-webkit-transform: scale(1.2);
}
Aside from that, you would also need:
-moz-transform: scale(1.2) if you want support in FF 16<
-ms-transform: scale(1.2) if you want support in IE9
-o-transform: scale(1.2) if you want support in Opera 12<
It will otherwise work in all major browsers.
You didn't include the -webkit- prefix for your hover animation.
Here is the JSFIDDLE
What I changed,
.play:hover {
transform: scale(1.2);
-webkit-transform: scale(1.2);
-moz-transform: scale(1.2);
-o-transform: scale(1.2);
}
Here is the problem with the code bellow. I want to create zoom-like effect with css. I am adding the classes zoomIn or zoomOut with jquery on certain events, which is not important right now.
The problem is that in Chrome and Safari (webkit based) the zoom in and out start from 0. In firefox for instance the transition starts from the current image height and extends to 1160px in this case. The webkit browsers however seem to handle things different and start the transition from 0 to 1160px
I ain't got no clever way to solve this so please help
Cheers
The images have also a class of 'full'
.full {display:block;position:absolute;width:100%;top:0;left:0;}
.zoomIn{
top:0;left:0;
box-sizing: border-box;
-webkit-transition: all 0.2s ease-in;
-o-transition: all 0.2s ease-in;
-moz-transition: all 0.2s ease-in;
transition: all 0.2s ease-in;
height: 1160px !important;
left: 50%;
margin-left: -960px !important;
margin-top: -670px !important;
top: 50%;
width: 1920px;
-webkit-transform: scale(1.2);
-moz-transform: scale(1.2);
-o-transform: scale(1.2);
transform: scale(1.2);
-ms-transform: scale(1.2);
}
.zoomOut {
-webkit-transition: all 0.2s ease-in;
-o-transition: all 0.2s ease-in;
transition: all 0.2s ease-in;
-moz-transition: all 0.2s ease-in;
-moz-transform: scale(1);
margin-left: 0 ;margin-top: 0;
-webkit-transform: scale(1);
-o-transform: scale(1);
transform: scale(1);
-ms-transform: scale(1);
}
CSS looks as follows:
.rotate
{
-webkit-transition: all .5s ease-in-out;
-moz-transition: all .5s ease-in-out;
-o-transition: all .5s ease-in-out;
-ms-transition: all .5s ease-in-out;
}
.rotate:hover
{
-webkit-transform: rotate(90deg) scale(1);
-moz-transform: rotate(90deg) scale(1);
-o-transform: rotate(90deg) scale(1);
-ms-transform: rotate(90deg) scale(1);
}
Hovering over a <span class="rotate"> will rotate the element in Firefox but not chrome.
Demo: http://jsfiddle.net/BuHGQ/ (hover over the arrow)
What can be done so that it works in Chrome?
Try this:
.rotate { display: inline-block; }
http://jsfiddle.net/y7nfD/1/