I have the following styling:
#logo-wrapper{
width: 397px;
height: 190px;
float: left;
-webkit-transform: skewX(-20deg);
-moz-transform: skewX(-20deg);
-ms-transform: skewX(-20deg);
-o-transform: skewX(-20deg);
transform: skewX(-20deg);
-webkit-transition: width 1.2s ease-in-out;
-moz-transition: width 1.2s ease-in-out;
-ms-transition: width 1.2s ease-in-out;
-o-transition: width 1.2s ease-in-out;
transition: width 1.2s ease-in-out;
}
#logo{
}
and my HTML looks like this:
<div id="logo-wrapper">
<div id="logo">
<img src="images/logo.jpg" alt="Logo" />
</div>
</div>
The webkit styling of the parent div (logo-wrapper) is making the image inside the child div (logo) angled!
Is there a way to remove the angle effect from the child div so that the logo image displays normally?
Thanks
You can apply that transform on some pseudo-element avoiding the entire element try this:
#logo-wrapper{
width: 397px;
height: 190px;
float: left;
position:relative;
}
#logo-wrapper:after {
content:" ";
display:block;
position:absolute;
z-index:-1;
top:0;bottom:0;left:0;right:0;
-webkit-transform: skewX(-20deg);
-moz-transform: skewX(-20deg);
-ms-transform: skewX(-20deg);
-o-transform: skewX(-20deg);
transform: skewX(-20deg);
-webkit-transition: width 1.2s ease-in-out;
-moz-transition: width 1.2s ease-in-out;
-ms-transition: width 1.2s ease-in-out;
-o-transition: width 1.2s ease-in-out;
transition: width 1.2s ease-in-out;
}
With this you avoid reverse the effect on each element inside and is better if you want to make some change.
You could try:
#logo {
-webkit-transform: skewX(+20deg);
-moz-transform: skewX(+20deg);
-ms-transform: skewX(+20deg);
-o-transform: skewX(+20deg);
transform: skewX(+20deg);
}
Here is a fiddle
You just need to reverse the skew on the image
#logo-wrapper {
width: 397px;
height: 190px;
float: left;
-webkit-transform: skewX(-20deg);
-moz-transform: skewX(-20deg);
-ms-transform: skewX(-20deg);
-o-transform: skewX(-20deg);
transform: skewX(-20deg);
-webkit-transition: width 1.2s ease-in-out;
-moz-transition: width 1.2s ease-in-out;
-ms-transition: width 1.2s ease-in-out;
-o-transition: width 1.2s ease-in-out;
transition: width 1.2s ease-in-out;
background-color: blue;
}
#logo {
-webkit-transform: skewX(20deg);
}
<div id="logo-wrapper">
<div id="logo">
<a href="#">
<img src="http://ipsumimage.appspot.com/100" alt="Logo" />
</a>
</div>
</div>
Found it.
-webkit-transform: skewX(20deg);
-moz-transform: skewX(20deg);
-ms-transform: skewX(20deg);
-o-transform: skewX(20deg);
transform: skewX(20deg);
Thanks
Related
If i have some block with CSS tranformation transition and it has child with longer transition duration and other transform property text in the main block is blured till the child animation ends. Is there some way around it? Even when the other seperate block has its animation it blures the text, is there some way to seperate this effects?
.parent {
margin:10px;
width: 100px;
height: 100px;
background: #000;
color: #aabb00;
-webkit-transition: all 0.5s;
-moz-transition: all 0.5s;
-ms-transition: all 0.5s;
-o-transition: all 0.5s;
transition: all 0.5s;
}
.parent:hover {
-webkit-transform: scale(1.05);
-moz-transform: scale(1.05) ;
-ms-transform: scale(1.05) ;
-o-transform: scale(1.05) ;
transform: scale(1.05) ;
}
.parent:hover .child {
-webkit-transform: rotate(360deg);
-moz-transform: rotate(360deg) ;
-ms-transform: rotate(360deg) ;
-o-transform: rotate(360deg) ;
transform: rotate(360deg) ;
}
.child {
width: 10px;
height: 10px;
background: #fff;
-webkit-transition: all 1.5s;
-moz-transition: all 1.5s;
-ms-transition: all 1.5s;
-o-transition: all 1.5s;
transition: all 1.5s;
}
<div class="parent">
<div>
<div class="child"></div>
</div>
<div>1234123412</div>
</div>
<div class="parent">
<div>
<div></div>
</div>
<div>1234123412</div>
</div>
Actually its standard browser behavior to blur text on its resize, it comes from optimization easeus, to render new text not in every animation frame, but after animation ends. It cant be fixed.
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.
I am rotating my images when hovered and I want the transition to be smooth so this is what I tried:
<div class="latest-thumbs">
<img src="images/thumbs/thumb01.jpg" alt="thumb" class="rotate" />
<img src="images/thumbs/thumb01.jpg" alt="thumb" class="rotate" />
<img src="images/thumbs/thumb01.jpg" alt="thumb" class="rotate" />
</div><!-- end latest-thumbs -->
CSS:
.rotate {
-webkit-transform: rotate(-45deg);
-moz-transform: rotate(-45deg);
-ms-transform: rotate(-45deg);
-o-transform: rotate(-45deg);
transform: rotate(-45deg);
-webkit-transform-origin: 50% 50%;
-moz-transform-origin: 50% 50%;
-ms-transform-origin: 50% 50%;
-o-transform-origin: 50% 50%;
transform-origin: 50% 50%;
-webkit-transition: 300ms ease all;
-moz-transition: 300ms ease all;
-o-transition: 300ms ease all;
transition: 300ms ease all;
}
.rotate:hover {
-webkit-transform: rotate(0deg);
-moz-transform: rotate(0deg);
-ms-transform: rotate(0deg);
-o-transform: rotate(0deg);
transform: rotate(0deg);
-webkit-transform-origin: 50% 50%;
-moz-transform-origin: 50% 50%;
-ms-transform-origin: 50% 50%;
-o-transform-origin: 50% 50%;
transform-origin: 50% 50%;
}
My images rotate when hovered, so there is no problem there, only, the transition is not smooth. Any ideas on how to fix this?
JSFiddle: http://jsfiddle.net/wntX4/
change all your transition css property (replace ease with linear)
transition: 300ms ease all;
with
transition: 300ms linear all;
refer this
Update
your transition is only for opacity property that is working in the right way
Try using transform: translate (and of course browser-specific prefixes). This article is pretty helpful.
I have just changed this in your fiddle and it works:
.rotate:hover {
transform: rotate(0deg) translate(50%);
-moz-transform: rotate(0deg) translate(50%);
-webkit-transform: rotate(0deg) translate(50%);
-o-transform: rotate(0deg) translate(50%);
-ms-transform: rotate(0deg) translate(50%);
-khtml-transform: rotate(0deg) translate(50%);
transition: all 2s ease;
-moz-transition: all 2s ease;
-webkit-transition: all 2s ease;
-o-transition: all 2s ease;
-ms-transition: all 2s ease;
-khtml-transition: all 2s ease;
}
I think that browser was firing 2 hovers at once. It's 1 year old but someong might fail into this again.
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.