I know we can rotate an element anticlockwise by using negative sign
transform : rotate(-20deg);
But this is only for x-axis. I want to rotate element along the y-axis. i tried
transform : rotateY(-20deg);
this doesn't works it rotate the element in same direction as we are using:
transform : rotateY(20deg);
i am searching for an answer for half-hour . please help.
When you used transform : rotate(-20deg);, you said that it was only for x-axis.
So your question is: I want to rotate element along the y-axis.If you meant that you wanted to rotate your div vertically, then the code below might help:
.rotate-vertically {
height:100px;
width:100px;
background:red;
padding:10px;
text-align:center;
transition: all 1.0s linear;
}
.rotate-vertically:hover {
transform:rotateX(180deg);
}
<div class="rotate-vertically">Hover me!
</div>
More information here
Why doesn't it? It does. Or do you want to stretch the element? Then transform:scale() would help you.
div{
transform: scale(2,1);
margin-left:200px;
}
<div>text</div>
(adding also the left margin, since scaling pushes the element off the screen)
Related
I am trying to apply a simple transform: rotateY(90deg) on an div but it's (the div) disappearing as a result, dev tools is not throwing any error on that line, any suggestions or anything I might be missing?
This happens because when you rotate something on the Y axis by 90 degrees it has spun so that it's essentially facing a different direction. In the below example I've added a transition to show how the element changes over time (hover over it):
figure {
background: red;
height: 100px;
transition: 1s;
width: 100px;
}
div:hover figure {
transform: rotateY(90deg);
}
<div>
<figure></figure>
</div>
As our viewport looks directly onto the element and features no depth, it appears that the element has disappeared altogether.
If we do add some depth, it's easier to visualise what's happening:
The cube on the left is our pre-transform cube and the cube on the right is our cube after it's had rotateY(90deg) applied to it. As we have no depth at all and we're looking at our element front on, we can't see anything when it gets rotated by 90 degrees.
When adding transitions to an element and altering the width and/or height and -webkit-transform:translate3d, the transition animation stutters. It appears to animate the width/height change first, as well translate it partially, then snaps to the final translated position. When returning to the original style, however, the animation is smooth. I'm only seeing this in Safari (version 8.0.6 tested). Here's some example css
#foo{
width:100%;
height:200px;
border:1px solid black;
position:relative;
}
#poop{
width:25px;
height:25px;
background-color:green;
position:absolute;
right:50%;
top:50%;
-webkit-transition: all 1s;
transform:translate3d(0,0,0);
-webkit-transform:translate3d(0,0,0);
}
#foo .blah{
transform:translate3d(-100%,-100%,0);
-webkit-transform:translate3d(-100%,-100%,0);
width:100px;
height:100px; }
And a jsfiddle http://jsfiddle.net/84w4hj99/4/
I'm using jquery to add a class to the element on a button click for the sake of demonstration, but first noticed it when using :hover to get the same effect. Am I missing something here or is it just a problem with Safari, and does anyone know a workaround? Thanks.
Try using transform: scale() instead of changing the width and height. You will have a smooth transition in this case. However, you will have to adjust the top & right or transform: translate3D() properties to position your object back to the correct position. Should be easy.
See http://jsfiddle.net/y3xqak1z/
i want to expand a div (on hover) from its parent's placement in the container to a set width that must fill my entire first row. THIS IS KINDA HARD TO PUT INTO WORDS SO this is the code in question:
#info {
z-index:2;
position:absolute;
background:#000;
color:#fff;
top:0px;
width:100%;
height:100%;
opacity:0;
transition-duration:0.5s;
-moz-transition-duration:0.5s;
-webkit-transition-duration:0.5s;
-o-transition-duration:0.5s; }
#icon:hover #info {
opacity:1;
width:665px;
transition:opacity 0.5s, width 0.5s ease 0.5s;
-moz-transition:opacity 0.5s, width 0.5s ease 0.5s;
-webkit-transition:opacity 0.5s, width 0.5s ease 0.5s;
-o-transition:opacity 0.5s, width 0.5s ease 0.5s; }
and here's a fiddle with what i have so far.
as you can see, the div #info in the first square in each row expand to the width i'd like them to, and the end result is what i'd like the bar to look like within the container for every square i hover over. the next squares in the same row expand to my desired width but they expand left only- i want them to expand left AND right so that they fill up the first row like the first square's div #info on hover does.
the second option in the answer to this question: Expand div from the middle instead of just top and left using CSS is a similar concept to what i am trying to achieve but it expands from the middle to equidistant left and right lengths- that wouldn't work with my layout because of the different placements of the parent divs within their row.
and if possible, i'd like to achieve this with just css! if someone does have a javascript solution, please give me step by step instructions omg i'm horrible with javascript.
<edit>last fiddle update </edit>
If,
boxes are always same size
not too many
always 4 on each row
You can set a negative margin either way:
dispatch a different class (3 or 4) to your boxes
or use nth-child(n) in css file
DEMO with nth-child(n) method (demo updated with transition)
#icon:nth-child(2):hover #info, #icon:nth-child(6):hover #info {
margin-left:-170px;
}
#icon:nth-child(3):hover #info, #icon:nth-child(7):hover #info {
margin-left:-350px;
}
#icon:nth-child(4n):hover #info {
margin-left:-530px;
}
More boxes ? , update selectors or it might be time to uses class.
I am moving some element from (browser height + element height)px towards the top of the browser at -50px of the browser using CSS keyframes and that works but the problem is it's lagging and I am well aware that using translateY would resolve this issue.
Now assume I have a CSS as follows.
.bubble
{
-webkit-transition: -webkit-transform 1s ease-in-out;
}
.bubble.move
{
-webkit-transform: translateY(-50px);
}
As the element is below the browser screen (browser height + element height)px and I want it to move at the top of the screen at -50px, that doesn't work. It just moves the element from its current position to the -50px of that current position which is not intended. How can I ask transitions to go at -50px of the browser and not he element?
Translate isn't what you're looking for. You want to position the element absolutely and put the transition on the top property. Something like:
.bubble {
position:absolute;
top:100%;
transition:top 1s ease-in-out;
}
.bubble.move {
top:50px;
}
Only bad part about this approach is that the body will need to be the relative parent of the .bubble. I left out vendor prefixes because I hate them.
Have you tried positioning the element absolutely instead of relatively?
Use javascript to calculate it and set the css using javascript too
Currently my webkit transform for scaling would affect the border radius, making it distorted. Is there any css3 hack that will allow me to preserve the rounded corners?
Example
Just manually manipulate the width and height, rather than using scaling:
#pan {
width:500px;
height:500px;
position:relative;
background:#aaa;
}
#rec {
width:100px;
height:100px;
position:absolute;
top:250px;
left:250px;
background:#fff;
-webkit-transition:500ms cubic-bezier(0.785, 0.135, 0.000, 0.940)
}
#rec:hover{
/*-webkit-transform:scale(3.5,1);*/
width:300px;
left:150px;
-webkit-transition:500ms linear;
-webkit-border-radius:35px;
}
<div id="pan">
<div id="rec"></div>
</div>
You could put your element of interest in a div. Then you could move the css border* from your element to the outer div. You can then apply a scaling** transform to your original element; the border (now in the outer div) should be unaffected.
*(and possibly other attributes such as absolute positioning, sizing, etc.)
**(any further transforms, such as rotations or 3d transforms, could then be applied separately to the outer div)