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);
Related
I want to achieve to have different transition for each transform when class is added/removed from element. Best solution would be not modifying HTML structure or even adding additional classes.
.navbar {
height: 60px;
transform: translate(0, 0);
transition: transform .5s ease; /* for transform: translate(0, -60px); */
transition: transform .2s linear; /* for transform: translate(200px, 0); */
}
.navbar.slide-up {
transform: translate(0, -60px);
}
.navbar.slide-left {
transform: translate(200px, 0);
}
You add the transition on the togglable classes
.navbar {
height: 60px;
transition: transform .35s; /* same for both when class is removed */
transform: translate(0, 0);
}
.navbar.slide-up {
transition: transform .5s ease; /* for transform: translate(0, -60px); */
transform: translate(0, -60px);
}
.navbar.slide-left {
transition: transform .2s linear; /* for transform: translate(200px, 0); */
transform: translate(200px, 0);
}
Updated, 2:nd
Note, based on how your script looks like, it might be possible to use the given transition and set it to the navbar on removal using cssText (and if, you won't need the extra classes)
Updated
If it will be possible to add 2 more classes, one can get a unique transition when resetting the elements position
With this, you first clear all classes, add one of them, and then, on removal add its reverse.
.navbar {
height: 60px;
transform: translate(0, 0);
}
.navbar.slide-up {
transition: transform .5s ease; /* for transform: translate(0, -60px); */
transform: translate(0, -60px);
}
.navbar.slide-left {
transition: transform .2s linear; /* for transform: translate(200px, 0); */
transform: translate(200px, 0);
}
.navbar.slide-up-reverse {
transition: transform .5s ease; /* for transform: translate(0, -60px); */
}
.navbar.slide-left-reverse {
transition: transform .2s linear; /* for transform: translate(200px, 0); */
}
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 problem with CSS transition and transformation in Safari
.class li{
background:#ffffff;
padding:30px;
-webkit-border-radius: 20px;
-moz-border-radius: 20px;
border-radius: 20px;
position: absolute;
transform: translate(-300px, 0px);
-webkit-transform: translate(-300px, 0px);
-moz-transform: translate(-300px, 0px);
-o-transform: translate(-300px, 0px);
-ms-transform: translate(-300px, 0px);
width:165px;
color:#151c2d;
-webkit-transition: all 500ms ease;
-moz-transition: all 500ms ease;
-o-transition: all 500ms ease;
-ms-transition: all 500ms ease;
transition: all 500ms ease;
}
.class li.active{
transform: translate(0px, 0px);
-webkit-transform: translate(0px, 0px);
-moz-transform: translate(0px, 0px);
-o-transform: translate(0px, 0px);
-ms-transform: translate(0px, 0px);
}
Everything works fine in Chrome, Firefox, IE but not in Safari.
In Safari we only change the content like display: none and display: block, in other browsers it slides from left to right on action (I change in javascript class for active element).
Do you have idea whats going on?
SO i am new to css actually i am a developer but i want to do this task with css only according to requirments . I have a div and i want to open a fixed div on click. i have tried some thing and setup on js fiddle here is js fiddle link . I am very near. main css part is
.portfolio
{
background: #218592;
z-index: 0;
opacity: 0;
-webkit-transform: translateX(0%);
-webkit-transition: -webkit-transform 0.5s ease-in-out, opacity 0s linear 0.5s;
-moz-transform: translateX(0%);
-moz-transition: -moz-transform 0.5s ease-in-out, opacity 0s linear 0.5s;
transform: translateX(0%);
transition: transform 0.5s ease-in-out, opacity 0s linear 0.5s;
-ms-transform: translateX(0%);
height: 100%;
width: 100%;
position: fixed;
top: 0;
left: 0;
}
.display-work
{
z-index: 1000;
opacity: 1;
-webkit-transform: translateX(-100%);
-moz-transform: translateX(-100%);
transform: translateX(-100%);
-ms-transform: translateX(-100%);
}
full code is available on JS fiddle
Problem
when i click on the div there is two issues
1) the div will not slide on first click (i can see this my self not a prior task)
2) the fixed div is sliding but it disappears immediately
unable to find the reason
You need to get rid of opacity:0 and switch translateX places.
portfolio{
background: #218592;
z-index: 0;
-webkit-transform: translateX(100%);
-webkit-transition: -webkit-transform 0.5s ease-in-out, opacity 0s linear 0.5s;
-moz-transform: translateX(100%);
-moz-transition: -moz-transform 0.5s ease-in-out, opacity 0s linear 0.5s;
transform: translateX(100%);
transition: transform 0.5s ease-in-out, opacity 0s linear 0.5s;
-ms-transform: translateX(100%);
height: 100%;
width: 100%;
position: fixed;
top: 0;
left: 0;
}
.display-work
{
z-index: 1000;
-webkit-transform: translateX(0%);
-moz-transform: translateX(0%);
transform: translateX(0%);
-ms-transform: translateX(0%);
}
Here is the fixed fiddle
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