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);
}
Related
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.
I have an image I would like to apply a css transitioned rotate transformation to when I mouse over an "a" tag in a separate area of the page. The only element I've thus far been able to target with this rotate is the image itself on hover over the image:
section#logo img {
-webkit-transition: -webkit-transform 5s ease-out;
-moz-transition: -moz-transform 5s ease-out;
-o-transition: -o-transform 5s ease-out;
transition: transform 5s ease-out;
}
section#logo img:hover {
-ms-transform: rotate(1800deg);
-webkit-transform: rotate(1800deg);
transform: rotate(1800deg);
}
What I want to do is something like this but I can't get it to function properly.
nav a:hover {
-webkit-transition: -webkit-transform 5s ease-out;
-moz-transition: -moz-transform 5s ease-out;
-o-transition: -o-transform 5s ease-out;
transition: transform 5s ease-out;
}
section#logo img {
-ms-transform: rotate(1800deg);
-webkit-transform: rotate(1800deg);
transform: rotate(1800deg);
}
Markup:
<nav>
Click
</nav>
<section id="logo">
<img src="images/item.png" />
</section>
Any help is greatly appreciated, thank you.
<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
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/