What I'm trying to achieve is to 3D flip a single letter inside a text.
<h1>WebN<span class="text-muted" id="logo-alpha">α</span>me</h1>
In this particular case i want to horizontally flip α when it's hovered with the mouse.
I tried doing the same by putting the α in an outside div and it works fine, but it doesn't when I try doing the same with the span inside h1.
This is my CSS:
#logo-alpha {
-webkit-transition: all 0.5s;
-moz-transition: all 0.5s;
-o-transition: all 0.5s;
transition: all 0.5s;
-webkit-transform: rotateY(0deg);
-moz-transform: rotateY(0deg);
-o-transform: rotateY(0deg);
-ms-transform: rotateY(0deg);
transform: rotateY(0deg);
}
#logo-alpha:hover {
-webkit-transform: rotateY(180deg);
-moz-transform: rotateY(180deg);
-o-transform: rotateY(180deg);
-ms-transform: rotateY(180deg);
transform: rotateY(180deg);
}
You are facing this issue : CSS tranform can't apply on inline elements see here : dev.w3.org transformable elements so you need to change the default display property of the <span> element to inline-block.
FIDDLE
CSS :
#logo-alpha{
display:inline-block;
-webkit-transition: -webkit-transform 1s;
-moz-transition: -moz-transform 1s;
transition: transform 1s;
}
h1:hover #logo-alpha{
-moz-transform: rotateY(-180deg);
-webkit-transform: rotateY(-180deg);
transform: rotateY(-180deg);
}
Below is some code for both X and Y flips - the important thing is your span needs display:inline-block in order for any 3d transformation to be applied.
Demo Fiddle
HTML
<h1>WebN<span class="flipX">α</span>me</h1>
<h1>WebN<span class="flipY">α</span>me</h1>
CSS
span {
-webkit-transition: all 1s ease;
transition: all 1s ease;
-webkit-transform: perspective(250px) rotateX(0deg) rotateY(0deg) rotateZ(0deg);
transform: perspective(250px) rotateX(0deg) rotateY(0deg) rotateZ(0deg);
display:inline-block;
}
span.flipX:hover {
-webkit-transform: perspective(250px) rotateX(360deg) rotateY(0deg) rotateZ(0deg);
transform: perspective(250px) rotateX(360deg) rotateY(0deg) rotateZ(0deg);
}
span.flipY:hover {
-webkit-transform: perspective(250px) rotateX(0deg) rotateY(360deg) rotateZ(0deg);
transform: perspective(250px) rotateX(0deg) rotateY(360deg) rotateZ(0deg);
}
user hover pseudo class,
.text-muted{font-zise:12px;}
.text-muted:hover{font-size:20px; /* opr what ever you want to do when mouse hover*/ }
or may be you want something this http://css3playground.com/3d-flip-cards/
try it
Related
I have customised the CSS of the view button and add to cart button
.sj_vm_deals_wrap .item:hover .sj_vm_deals_popup{
display:block;
filter: alpha(opacity=10000);
-webkit-transform: translate(0,0);
-moz-transform: translate(0,0);
-ms-transform: translate(0,0);
-o-transform: translate(0,0);
transform: translate(0,0);
transition: all 0.666666666666667s ease 0s;
}
And
.sj_vm_deals_wrap .item .sj_vm_deals_popup{
display:block;
filter: alpha(opacity=10000);
-webkit-transform: translate(0,0);
-moz-transform: translate(0,0);
-ms-transform: translate(0,0);
-o-transform: translate(0,0);
transform: translate(170px,0);
transition: all 0.666666666666667s ease 0s;
}
before it was only :
.sj_vm_deals_wrap .item:hover .sj_vm_deals_popup{
display:block;
}
But now when you hover on products you will see that the slide-in-from-outside effect looks not correct. How can I fix this?
you can see it here : ibn.reviewcost.com
You are (probably) looking for:
.owl-carousel .item {
overflow: hidden;
}
Which removes the 'not correct' slide-in-from-outside effect.
I have a simple bounce in animation for my figure , see HTML below:
<figure>
<img src="http://unilaboralgirona.com/wp-content/uploads/2015/03/ZContact.jpg" alt="">
<figcaption>
<!-- empty for now -->
</figcaption>
</figure>
My CSS animation is as follows:
#keyframes drop-in-thumb {
0% {
-webkit-transform: translateY(-50px);
-ms-transform: translateY(-50px);
-o-transform: translateY(-50px);
transform: translateY(-50px);
opacity: 0.8;
}
35% {
-webkit-transform: translateY(0);
-ms-transform: translateY(0);
-o-transform: translateY(0);
transform: translateY(0);
opacity: 1;
}
55% {
-webkit-transform: translateY(-15px);
-ms-transform: translateY(-15px);
-o-transform: translateY(-15px);
transform: translateY(-15px);
}
70% {
-webkit-transform: translateY(0px);
-ms-transform: translateY(0px);
-o-transform: translateY(0px);
transform: translateY(0px);
}
85% {
-webkit-transform: translateY(-5px);
-ms-transform: translateY(-5px);
-o-transform: translateY(-5px);
transform: translateY(-5px);
}
100% {
-webkit-transform: translateY(0);
-ms-transform: translateY(0);
-o-transform: translateY(0);
transform: translateY(0);
opacity: 1;
}
}
The fiddle can be seen HERE.
The problem is my animation is quite jerky , I.E. it does't have a realistic bounce in effect , it looks clearly quite jerky. My question is what other property in the keyframes apart form the % breakpoints can i use to tweak and make my animation smooth ?
Tweaking the % breakpoints really helped me make the animation much more smoother and but its really not yet realistic yet. What other CSS animation property can i use to make this animation smoother ?
It would be great if somebody could demonstrate how i could perfect and make this animation much more smoother.
P.S. i am aware of the library animate.css but don't want to use it.
The animation-timing-function property should improve this considerably.
Try adding the following to the styles for figure:
-webkit-animation-timing-function: ease-in-out;
-moz-animation-timing-function: ease-in-out;
-o-animation-timing-function: ease-in-out;
animation-timing-function: ease-in-out;
I've edited your fiddle to show the difference: https://jsfiddle.net/ssexmh3s/2/
I'm using transform: rotate(-2deg); on a section. When the user hovers over the section, it changes in size using transform: scale(1.1);.
There's one page on my site where I'd like to maintain the rotation, but not the scale when the user hovers over the section. Is there a way to reset transform: scale(1.1); without resetting transform: rotate(-2deg);?
Here's the code in full:
section {
display: block;
width: 100px;
height: 100px;
padding: 10px;
background: red;
/* Rotate */
-webkit-transform: rotate(-2deg);
-moz-transform: rotate(-2deg);
-ms-transform: rotate(-2deg);
-o-transform: rotate(-2deg);
transform: rotate(-2deg);
/* Easing */
-webkit-transition: -webkit-transform .2s ease-in-out;
-moz-transition: -moz-transform .2s ease-in-out;
-o-transition: -o-transform .2s ease-in-out;
transition: transform .2s ease-in-out;
}
section: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);
}
.some-page section:hover {
-webkit-transform: none;
-moz-transform: none;
-ms-transform: none;
-o-transform: none;
transform: none;
}
Fiddle here.
You could just set the original transform value back again on the hover selector like given below:
.some-page section:hover {
-webkit-transform: rotate(-2deg);
-moz-transform: rotate(-2deg);
-ms-transform: rotate(-2deg);
-o-transform: rotate(-2deg);
transform: rotate(-2deg);
}
This would make sure that the rotation stays at -2 degree but the scale would not happen as this selector is more specific and would take precedence over the other generic hover selector.
section {
display: block;
width: 100px;
height: 100px;
padding: 10px;
background: red;
/* Rotate */
-webkit-transform: rotate(-2deg);
-moz-transform: rotate(-2deg);
-ms-transform: rotate(-2deg);
-o-transform: rotate(-2deg);
transform: rotate(-2deg);
/* Easing */
-webkit-transition: -webkit-transform .2s ease-in-out;
-moz-transition: -moz-transform .2s ease-in-out;
-o-transition: -o-transform .2s ease-in-out;
transition: transform .2s ease-in-out;
}
section: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);
}
.some-page section:hover {
-webkit-transform: rotate(-2deg);
-moz-transform: rotate(-2deg);
-ms-transform: rotate(-2deg);
-o-transform: rotate(-2deg);
transform: rotate(-2deg);
}
/* Just for demo */
section {
margin: 10px;
}
<section>I'm some content</section>
<div class="some-page">
<section>I'm some content</section>
</div>
My code doesnt work in Firefox and I dont know why. Any advices? It works fine in Chrome, IE and Opera. I tried almost all prefixes combinations but still it wont work. Is it possible that something is wrong with my PC or Firefox browser?
.span-accent {
color: rgb(60, 185, 120);
-webkit-animation: breath 2s infinite;
-moz-animation: breath 2s infinite;
animation: breath 2s infinite;
}
#-webkit-keyframes breath {
0% {
-webkit-transform: scale(1);
transform: scale(1);
}
25% {
-webkit-transform: scale(1.2);
transform: scale(1.2);
}
50% {
-webkit-transform: scale(1);
transform: scale(1);
}
75% {
-webkit-transform: scale(1.2);
transform: scale(1.2);
}
100% {
-webkit-transform: scale(1);
transform: scale(1);
}
}
#-moz-keyframes breath {
0% {
-moz-transform: scale(1);
transform: scale(1);
}
25% {
-moz-transform: scale(1.2);
transform: scale(1.2);
}
50% {
-moz-transform: scale(1);
transform: scale(1);
}
75% {
-moz-transform: scale(1.2);
transform: scale(1.2);
}
100% {
-moz-transform: scale(1);
transform: scale(1);
}
}
#keyframes breath {
0% {
-webkit-transform: scale(1);
transform: scale(1);
}
25% {
-webkit-transform: scale(1.2);
transform: scale(1.2);
}
50% {
-webkit-transform: scale(1);
transform: scale(1);
}
75% {
-webkit-transform: scale(1.2);
transform: scale(1.2);
}
100% {
-webkit-transform: scale(1);
transform: scale(1);
}
}
<h1>LAKA</h1>
<h2>architecture that <span class="span-accent">reacts.</span></h2>
Ok guys, I found it.
Problem is in <span> element. For some reason Firefox doesnt animate inline elements.
So what I did is change a <span> atribute to display: inline-block.
It just wont work strictly for any inline element.
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.