I am testing with CSS and got to a strange behaviour where transform:rotate doesn't work, here is an example where the animation doesn't happen: jsFiddle
CSS
.close {
width:100px;
height:100px;
background:#00f;
color:#fff;
-webkit-transform: rotate(0deg);
-moz-transform: rotate(0deg);
-o-transform: rotate(0deg);
-ms-transform: rotate(0deg);
transform: rotate(0deg);
}
.close:hover {
-webkit-transform: rotate(-180deg);
-moz-transform: rotate(-180deg);
-o-transform: rotate(-180deg);
-ms-transform: rotate(-180deg);
transform: rotate(-180deg);
}
.close, .close:hover {
-webkit-transition:rotate .2s ease-in-out;
-moz-transition:rotate .2s ease-in-out;
-o-transition:rotate .2s ease-in-out;
-ms-transition:rotate .2s ease-in-out;
transition:rotate .2s ease-in-out;
}
Why is this not working?
Thanks ;)
You applied the transition to the wrong attribute: (Working jsFiddle)
.close { /* You don't really need .close:hover here */
-webkit-transition: -webkit-transform .2s ease-in-out;
-moz-transition: -moz-transform .2s ease-in-out;
-o-transition: -o-transform .2s ease-in-out;
-ms-transition: -ms-transform .2s ease-in-out;
transition: transform .2s ease-in-out;
}
The attribute you want to animate is transform. rotate() is a transformation function not a CSS property.
Related
I'm making a hover effect on my website, where you hover images (pngs) and they grow in size. The problem i have is that they now get blurry when they resize.
The code that I'm using looks something like this:
.div {
-webkit-transition: -webkit-transform 0.35s;
transition: transform 0.35s;
-webkit-transform: perspective(1000px) translate3d(0,0,1px);
transform: perspective(1000px) translate3d(0,0,0);
}
.div:hover {
-webkit-transform: perspective(100px) translate3d(0,0,1px);
transform: perspective(100px) translate3d(0,0,31px);
}
And you can see the effect on this jsfiddle: enter link description here
Is there a way to fix this?
I think scale would be more appropriate for this. This solution only blurs during scaling.
.square {
width:100px;
height: 100px;
background-color:black;
margin: 50px;
}
p {
color:white;
text-align: center;
padding-top: 35px;
}
.square {
-webkit-transition: -moz-transform .3s ease-out;
-moz-transition: -webkit-transform .3s ease-out;
-o-transition: -o-transform .3s ease-out;
transition: transform .3s ease-out;
}
.square:hover {
-webkit-transform: scale(2);
-moz-transform: scale(2);
-o-transform: scale(2);
transform: scale(2);
}
<div class="square">
<p>Some text</p>
</div>
i have a 45 deg rotated div. i am trying on hover to rotate it around its y-axis by using css3 perspective. it dont hover like i want and it becomes a square when hovered. i would like to maintain rotated 45 deg at the end of the animation.
here is my code:
<div class="perspective">
<a href="#" class="box">
<div class="innerbox">
text
</div>
</a>
</div>
.perspective
{
position:relative;
width:100px;
height:100px;
margin:200px 0px 0px 200px;
-moz-perspective: 300px;
-webkit-perspective: 300px;
-o-perspective: 300px;
-ms-perspective: 300px;
perspective: 300px;
}
.box
{
width:80px;
height:80px;
position:absolute;
top:0;
bottom:0;
left:0;
right:0;
margin:auto;
border: 5px solid #000;
-moz-transform: rotate(45deg);
-webkit-transform: rotate(45deg);
-o-transform: rotate(45deg);
-ms-transform: rotate(45deg);
transform: rotate(45deg);
-webkit-transition: all 800ms ease;
-moz-transition: all 800ms ease;
-ms-transition: all 800ms ease;
-o-transition: all 800ms ease;
transition: all 800ms ease;
}
.innerbox
{
margin:30px 0px 0px 20px;
-moz-transform: rotate(-45deg);
-webkit-transform: rotate(-45deg);
-o-transform: rotate(-45deg);
-ms-transform: rotate(-45deg);
transform: rotate(-45deg);
}
.box:hover
{
-moz-transform: rotateY(180deg);
-webkit-transform: rotateY(180deg);
-o-transform: rotateY(180deg);
-ms-transform: rotateY(180deg);
transform: rotateY(180deg);
-webkit-transition: all 800ms ease;
-moz-transition: all 800ms ease;
-ms-transition: all 800ms ease;
-o-transition: all 800ms ease;
transition: all 800ms ease;
}
i made an example http://jsfiddle.net/o6mo0rjq/
You've initially rotated .box by 45 degrees around the Z-axis. When you specify a new transform, this initial rotation is overwritten - so for the new rotation on :hover, you should also specify the original rotation. Your block declaration would then become:
.box:hover {
-moz-transform: rotateY(180deg) rotateZ(45deg);
-webkit-transform: rotateY(180deg) rotateZ(45deg);
-o-transform: rotateY(180deg) rotateZ(45deg);
-ms-transform: rotateY(180deg) rotateZ(45deg);
transform: rotateY(180deg) rotateZ(45deg);
-webkit-transition: all 800ms ease;
-moz-transition: all 800ms ease;
-ms-transition: all 800ms ease;
-o-transition: all 800ms ease;
transition: all 800ms ease;
}
Here's a JSFiddle to demonstrate. (Note: The order in transform matters! Because that dictates the order in which the rotations are applied to the element, which may give you different results depending on the transformations you're applying.)
Hope this helps! Let me know if you have any questions.
Suppose, I have a facebook logo image. This image also works as a link to my facebook profile. Now, I want as soon as a user put the mouse cursor over it, it should increase the height (let's say 3 px).
This is my source code I am working on:
.HTML:
<div id="find_me_on">
<p>Find me on:</p><br><img src="img/fblogo.png" title="Facebook" id="inc_fb_height" />
</div
.CSS:
#inc_fb_height{
/*Need help*/
}
Don´t waste JavaScript (and especially not jQuery) for those things, you only need CSS:
#inc_fb_height {
-webkit-transition: all .2s ease-out;
-moz-transition: all .2s ease-out;
-ms-transition: all .2s ease-out;
-o-transition: all .2s ease-out;
transition: all .2s ease-out;
}
#inc_fb_height:hover {
-webkit-transform: scale(1.1);
-moz-transform: scale(1.1);
-ms-transform: scale(1.1);
-o-transform: scale(1.1);
transform: scale(1.1);
}
Of course you can also just scale the height with scale(1, 1.1), or scaleY(1.1).
Although, it would be better to start with a scale factor <1 and set scale to 1 on hover - to avoid blurry pictures.
Here´s that version with scale3d, so it uses hardware acceleration (not really needed in that case, but #yolo):
#inc_fb_height {
-webkit-transition: all .2s ease-out;
-moz-transition: all .2s ease-out;
-ms-transition: all .2s ease-out;
-o-transition: all .2s ease-out;
transition: all .2s ease-out;
-webkit-transform: scale3d(0.9, 0.9, 1);
-moz-transform: scale3d(0.9, 0.9, 1);
-ms-transform: scale3d(0.9, 0.9, 1);
-o-transform: scale3d(0.9, 0.9, 1);
transform: scale3d(0.9, 0.9, 1);
}
#inc_fb_height:hover {
-webkit-transform: scale3d(1, 1, 1);
-moz-transform: scale3d(1, 1, 1);
-ms-transform: scale3d(1, 1, 1);
-o-transform: scale3d(1, 1, 1);
transform: scale3d(1, 1, 1);
}
USE this fiddle if you want css fix only
http://jsfiddle.net/4wpw6add/4/
#inc_fb_height{
height:120px;
}
#inc_fb_height:hover{
height:124px;
}
USE this fiddle if you can use javascript
http://jsfiddle.net/4wpw6add/5/
.img-zoom:hover {
-webkit-transition: all .2s ease-in-out;
-moz-transition: all .2s ease-in-out;
-o-transition: all .2s ease-in-out;
-ms-transition: all .2s ease-in-out;
}
.transition {
-webkit-transform: scale(1.1);
-moz-transform: scale(1.1);
-o-transform: scale(1.1);
transform: scale(1.1);
}
jquery
$(document).ready(function(){
$('.img-zoom').hover(function() {
$(this).addClass('transition');
}, function() {
$(this).removeClass('transition');
});
});
I have created a JS fiddle for this. -- JS FIDDLE
#inc_fb_height:hover{
height:500px; /* new height*/
}
Use what you have:
#inc_fb_height{
height:100px;
}
but then add
#inc_fb_height:hover{
height:103px;
}
creating a hover property that takes the original and changes it to 3px taller on mouse hover
add a hover state to the image:
HTML:
<div id="find_me_on">
<p>Find me on:</p> <img src="http://www.insidefacebook.com/wp-content/uploads/2013/01/profile-150x150.png" title="Facebook" id="inc_fb_height" />
</div>
CSS:
img#inc_fb_height {
position: relative;
height: 150px;
}
img#inc_fb_height:hover {
height: 153px;
}
Fiddle:
http://jsfiddle.net/jazztorbs/k3u1dLna/
A simple question.
When I hover the element, element should be scale. Working fine. Problem is I have some background colors also applying. I want to get rid of this background transition.
Following is my code.
.scale{
-webkit-transition: all .2s ease-in-out;
-moz-transition: all .2s ease-in-out;
-o-transition: all .2s ease-in-out;
transition: all .2s ease-in-out;
}
.scale:hover{
-webkit-transform: scale(1.1);
-moz-transform: scale(1.1);
-o-transform: scale(1.1);
transform: scale(1.1);
}
I have changes the transition-property to width, height, top, right, bottom, left
My pen http://codepen.io/anon/pen/yAGBj
Change your transition to only affect the desired CSS properties rather than all:
transition: transform .2s ease-in-out;
CodePen demo.
As I mentioned in the comment above, just add the background:red in your scale:hover class.
.scale:hover{
-webkit-transform: scale(1.1);
-moz-transform: scale(1.1);
-o-transform: scale(1.1);
transform: scale(1.1);
background:red;
}
DEMO
I try to using transform:translate method for hover effect in #media only screen rule, but it doesn't work.
Without #media rule, hove method is OK with mouseower.
Any suggestions?
/* Here is css code */
.cs-hover a.info {
-webkit-transform: translate(0px, 350px);
-moz-transform: translate(0px, 350px);
-o-transform: translate(0px, 350px);
-ms-transform: translate(0px, 350px);`
transform: translate(0px, 350px);
-webkit-transition: all 0.2s 0.1s ease-in-out;
-moz-transition: all 0.2s 0.1s ease-in-out;
-o-transition: all 0.2s 0.1s ease-in-out;
-ms-transition: all 0.2s 0.1s ease-in-out;
transition: all 0.2s 0.1s ease-in-out;}
#media only screen and (min-width: 480px) and (max-width: 767px) {
.cs-hover:hover a.info {
-webkit-transform: translate(60px,25px);
-moz-transform: translate(60px,25px);
-o-transform: translate(60px,25px);
-ms-transform: translate(60px,25px);
transform: translate(60px,25px);
-webkit-transition-delay: 0.2s;
-moz-transition-delay: 0.2s;
-o-transition-delay: 0.2s;
-ms-transition-delay: 0.2s;
transition-delay: 0.2s;}
}