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>
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 have a left menu, and when I hover to a menu item a submenu open and when clicking on the submenu, the background covers my entire page if the internet is slow, and then goes back as it was.
CSS
#media (min-width: 478px) {
nav.main-menu {
position: absolute;
top: 72px;
left: 0;
z-index: 1010;
overflow: hidden;
width: 60px;
height: 100%;
background: #333333;
-moz-transform: translateZ(0) scale(1, 1);
-ms-transform: translateZ(0) scale(1, 1);
-o-transform: translateZ(0) scale(1, 1);
-webkit-transform: translateZ(0) scale(1, 1);
-moz-transition: width 0.05s linear;
-o-transition: width 0.05s linear;
-webkit-transition: width 0.05s linear;
transition: width 0.05s linear;
transform: translateZ(0) scale(1, 1);
}
nav.main-menu > ul {
margin: 7px 0;
}
nav.main-menu li {
position: relative;
display: block;
width: 250px;
}
}
How to fix this?
Deleted this part and it worked fine:
-moz-transform: translateZ(0) scale(1, 1);
-ms-transform: translateZ(0) scale(1, 1);
-o-transform: translateZ(0) scale(1, 1);
-webkit-transform: translateZ(0) scale(1, 1);
-moz-transition: width 0.05s linear;
-o-transition: width 0.05s linear;
-webkit-transition: width 0.05s linear;
transition: width 0.05s linear;
transform: translateZ(0) scale(1, 1);
I have a CSS only carousel (which is very nice!), the only problem is that the first slide is not selected by default.
How could I achieve this without using JavaScript?
<div class="carousel">
<div class="item red slide-in" id="item1"><h1>Item 1</h1></div>
<div class="item green slide-in" id="item2"><h1>Item 2</h1></div>
<div class="item yellow slide-in" id="item3"><h1>Item 3</h1></div>
<div class="item red slide-in" id="item4"><h1>Item 4</h1></div>
<div class="controls">
•
•
•
•
</div>
</div>
And the core css:
.carousel {
position: relative;
width: 100%;
height: 100%;
overflow: hidden;
}
.carousel .item {
position: absolute;
width: 100%;
height: 100%;
text-align: center;
}
/* animations */
.carousel .slide-in {
-webkit-transform: translate3d(-90%, 0px, 0px);
-moz-transform: translate3d(-90%, 0px, 0px);
-ms-transform: translate3d(-90%, 0px, 0px);
-o-transform: translate(-90%, 0px, 0px);
transform: translate3d(-90%, 0px, 0px);
-webkit-transition: -webkit-transform 0.5s ease-out;
-moz-transition: -moz-transform 0.5s ease-out;
-ms-transition: -ms-transform 0.5s ease-out;
-o-transition: -o-transform 0.5s ease-out;
transition: transform 0.5s ease-out;
z-index: 1;
}
.carousel .slide-in:target ~ .slide-in {
-webkit-transform: translate3d(90%, 0px, 0px);
-moz-transform: translate3d(90%, 0px, 0px);
-ms-transform: translate3d(90%, 0px, 0px);
-o-transform: translate(90%, 0px, 0px);
transform: translate3d(90%, 0px, 0px);
}
.carousel .slide-in:target,
.carousel .slide-in:focus {
-webkit-transform: translate3d(0px, 0px, 0px);
-moz-transform: translate3d(0px, 0px, 0px);
-ms-transform: translate3d(0px, 0px, 0px);
-o-transform: translate(0px, 0px, 0px);
transform: translate3d(0px, 0px, 0px);
z-index: 3;
}
.carousel .slide-in:target + .slide-in {
z-index: 2;
}
Here is a fiddle with the carousel working:
http://jsfiddle.net/kmturley/fs6wge3f/6/
One approach that partially works, would be to select the first element if it isn't a target.
To select an element that isn't a target, negate it using :not(:target).
To select the first element, just combine it with :first-of-type:
Updated Example
.carousel .slide-in:first-of-type:not(:target) {
-webkit-transform: translate3d(0px, 0px, 0px);
-moz-transform: translate3d(0px, 0px, 0px);
-ms-transform: translate3d(0px, 0px, 0px);
-o-transform: translate(0px, 0px, 0px);
transform: translate3d(0px, 0px, 0px);
z-index: 3;
}
The caveat with this approach is that the first element no longer seems to slide.
Alternatively, the only other thing I can think of would be to have an input element with the attribute autofocus="autofocus". Since the element will initially be in focus, utilize it by styling the first element using the selector .carousel input[type="checkbox"]:focus + .slide-in:
Updated Example
.carousel input[type="checkbox"]:focus + .slide-in,
.carousel .slide-in:target,
.carousel .slide-in:focus {
-webkit-transform: translate3d(0px, 0px, 0px);
-moz-transform: translate3d(0px, 0px, 0px);
-ms-transform: translate3d(0px, 0px, 0px);
-o-transform: translate(0px, 0px, 0px);
transform: translate3d(0px, 0px, 0px);
z-index: 3;
}
The caveat with this approach is that the first slide will move as soon as the hidden input element loses focus.
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.