In this code when, when rotating along top left point , the bar sways a lil bit down , while rotating
have seen this multiple time , sometimes it gets fixed , but i cannot spot the diff.
#keyframes rightup{
100%{
transition:transform 1s linear;
transform-origin:top left;
transform:rotate(-50deg);
}
}
.box{
position:absolute;
height:10px;
width:150px;
background-color:black;
top:50%;
left:50%;
border-radius:5px;
animation-name:rightup;
animation-duration:5s;
}
<div class="box"></div>
wanted something like this
.box{
position:absolute;
height:10px;
width:150px;
background-color:black;
top:50%;
left:50%;
border-radius:5px;
animation-name:rightup;
animation-duration:5s;
}
.box:hover{
transition:transform 1s linear;
transform-origin:top left;
transform:rotate(-50deg);
}
<div class="box"></div>
In the animation you aren't setting the transform-origin to the left top right from the start, but you are doing so in the transition/transform example.
Also, a minor point for such a slim bar but it makes a slight difference, you are rotating about the top of the bar rather than the (vertical) center.
This snippet changes both these things:
#keyframes rightup {
0% {
transform-origin: center left;
}
100% {
transform-origin: center left;
transform: rotate(-50deg);
}
}
.box {
position: absolute;
height: 10px;
width: 150px;
background-color: black;
top: 50%;
left: 50%;
border-radius: 5px;
animation-name: rightup;
animation-duration: 5s;
}
<div class="box"></div>
Related
I have sample code on codepen here
.liel{
position: relative;
}
.parent{
position: fixed;
top:0;
left:0;
width:100%;
height:100%;
background-color: rgba(0, 0, 0, .8);
z-index:100;
}
.green{
width:100px;
height:100px;
background-color:green;
}
#keyframes zoomIn {
0%{
top:0;
left:0;
width:100px;
height:100px;
opacity: 0;
}
100%{
opacity: 1;
}
}
.zoom{
width:200px;
height:200px;
background-color:red;
position: fixed;
top:50%;
left:50%;
transform: translate(-50%, -50%);
animation: zoomIn 5s;
}
<ul>
<li class="liel">
<div class="green"></div>
<div class="parent">
<div class="zoom"></div>
</div>
</li>
</ul>
There are 2 rectangles - one red and one green.
Green can be anywhere on the screen.
What I'm trying to create is zoom-in animation from position of green rectangle to the final position of red rectangle. I'm trying somehow to get starting position relative to green rectangle, but cannot do it since .parent element is also fixed in position.
Currently red element has zoom-in effect but initial position is left:0 top:0 which is position of .parent and not .green.
Is there any workaround for this?
May be this can help you. (Read this other stackoverflow answer)
$(document).ready(function() {
setTimeout( function(){
$('.green').addClass('fixed');
},1000);
$('.green').css('position','fixed');
});
.liel{
position: relative;
}
.parent{
position: fixed;
top:0;
left:0;
width:100%;
height:100%;
background-color: rgba(0, 0, 0, .2);
z-index:100;
pointer-events: none;
}
.green {
width:100px;
height:100px;
background-color:green;
transition: all 5s ease-in-out;
}
.zoom{
width:200px;
height:200px;
background-color:red;
position: fixed;
top:50%;
left:50%;
transform: translate(-50%, -50%);
animation: zoomIn 5s;
}
.fixed {
animation: zoomIn 5s;
transform: translate(-50%, -50%);
width:200px;
height:200px;
top:50%;
left:50%;
}
#keyframes zoomIn {
0%{
top:0;
left:0;
width:100px;
height:100px;
opacity: 0;
}
100%{
opacity: .5;
}
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<ul>
<li class="liel">
<div class="green"></div>
<div class="parent">
<div class="zoom"></div>
</div>
</li>
</ul>
Here is a simple Js slider, and need to make it responsive for mobiles. But when i apply max-width to #slider and #image it hides whole div element. For example default width should be 500pxl and 300pxl height. For wide screen. It should automatically resize depend on mobile and tablet screen width. Is it possible?
html:
<body onLoad="photoA()">
<div id="slider">
<img src="Images/img1.jpg" id="image" >
<img onClick="photo(-1)" class="left" src="Images/arrow_left.png">
<img onClick="photo(1)" class="right" src="Images/arrow_right.png">
</div>
css:
*{
margin:0px;
}
#slider {
height:350px;
max-width:500px;
margin: 5px auto;
position:relative;
border-radius:4px;
overflow:hidden;
}
#image {
height:350px;
width:500px;
position:absolute;
}
.left {
height:50px;
width:50px;
position:absolute;
top:40%;
left:10px;
opacity:1;
transition: all .2s ease-in-out 0s;
}
.right {
height:50px;
width:50px;
position:absolute;
top:40%;
right:10px;
opacity:1;
transition: all .5s ease-in-out 0s;
}
.right:hover , .left:hover {
opacity:0.6; cursor: pointer;
}
What is the reason for positioning your main image absolutely? It will only make your life miserable.
If you make the following changes, you'll get the desired result:
#slider {
width: 100%;
max-width:500px;
height: auto;
margin: 5px auto;
position:relative;
border-radius:4px;
}
#image {
width: 100%;
height: auto;
}
To make your slider look even better, I suggest that you also use:
.left {
height:50px;
width:50px;
position:absolute;
top:50%;
transform: translateY(-50%);
left:10px;
opacity:1;
transition: all .2s ease-in-out 0s;
}
.right {
height:50px;
width:50px;
position:absolute;
top:50%;
transform: translateY(-50%);
right:10px;
opacity:1;
transition: all .5s ease-in-out 0s;
}
Note: The div disappeared because you cannot set max-width to the parent when all its children are positioned absolutely With no widths and heights or max-widths and max-heights (They behave as if they had the values not set).
I have elements with position: absolute; that I want to transition in certain situations. However, the origin of the width and height transition seems to depend on the top/bottom left/right values.
Is there any way to have more control over this?
I am specifically looking to transition from the center of the div.
Is there any solution that doesn't rely on transitioning also the top/bottom left/right values?
Edit:
I want to keep the width and height transitioning.
Thank you for the answers but using Transform scale is not a solution in this case. Percentages in the Transform property refer to the size of the element's border box, not the container. See for example this JSFiddle, how the end result of hovering over the two elements is different.
JSFiddle
div, span {
width:30%;
height:30%;
background:pink;
transition:all 1s ease;
position:absolute;
}
*:hover{
width:10%;
height:10%;
}
div{
top:10%;
left:10%;
}
span{
bottom:10%;
right:10%;
}
<div></div>
<span></span>
Well, you can always use transform - scale for that matter:
div {
background:pink;
width:200px;
height:200px;
transition:all 1s ease;
}
div:hover{
-webkit-transform: scale(0.1);
-ms-transform: scale(0.1);
transform: scale(0.1);
}
<div></div>
I would suggest using transform: translate when animating positions since it's better for performance and you can then control its origin with transform-origin.
And if you want to change the width or height you can similarly use transform: scale.
Say you want to double something in size from the center outwards. Then you'd just need to write transform: scale(2.0), since the default value of transform-origin is 50% 50%.
See example here: https://jsfiddle.net/ydpx284g/
You could change the position at the same time to simulate the effect. But I'm with the others: transform: scale is a better approach to this.
div, span {
width:30%;
height:30%;
background:pink;
transition:all 1s ease;
position:absolute;
}
div{
top:10%;
left:10%;
}
div:hover{
width:10%;
height:10%;
top: 20%;
left: 20%;
}
span{
bottom:10%;
right:10%;
}
span:hover{
width:10%;
height:10%;
bottom: 20%;
right: 20%;
}
<div></div>
<span></span>
Version with transforms:
div, span {
width:30%;
height:30%;
background: red;
transition: all 1s ease;
position: absolute;
}
div{
top:10%;
left:10%;
}
div:hover{
transform-origin: 50% 50%;
transform: scale(0.3);
}
span{
bottom:10%;
right:10%;
}
span:hover{
transform-origin: 50% 50%;
transform: scale(0.3);
}
<div></div>
<span></span>
The best way is using matrix, this allows you to combine transitions and transformations.
The matrix takes 6 arguments
transform: matrix(a, b, c, d, e, f);
Where
a= scale X axis
b= skewX
c= skewY
d= scale Y axis
e= position X
f= position Y
In this case, I set the scale on the X axis (which is going to alter the width) to the double of the initial width after hover. (the value 2 means initial scale times 2)
The scale on the Y axis is not altered (the value 1 means initial scale times 1, so the height won't change) The rest of the arguments are 0 because you don't need to use them in this case.
.example {
width: 30%;
height: 30%;
background-color: pink;
position: absolute;
top: 35%;
left: 35%;
transition: width, height, transform 1s;
}
.example:hover {
transform: matrix(2, 0, 0, 1, 0, 0);
}
<div class="example"></div>
Not sure if this is exactly what you're looking for, but this solution is not based on the transform: scale and you can manually set the desired width and height of your div on hover even in percentage.
And the percentage is relative to the width of the container.
HTML
<div id="container">
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
</div>
CSS
#container{
width: 400px;
height: 400px;
background: #eee;
position: relative;
}
.box{
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
background: #000;
width: 20%;
height: 20%;
transition: 0.3s;
cursor: pointer;
}
.box:hover{
width: 7%;
height: 10%;
}
.box:nth-child(2){
left: 20%;
}
.box:nth-child(3){
top: 20%;
}
.box:nth-child(4){
top: 20%;
left: 20%;
}
#container {
width: 400px;
height: 400px;
background: #eee;
position: relative;
}
.box {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
background: #000;
width: 20%;
height: 20%;
transition: 0.3s;
cursor: pointer;
}
.box:hover {
width: 7%;
height: 10%;
}
.box:nth-child(2) {
left: 20%;
}
.box:nth-child(3) {
top: 20%;
}
.box:nth-child(4) {
top: 20%;
left: 20%;
}
<div id="container">
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
</div>
You can try using transform: translate(-50%, -50%); see if that helps.
.example {
width: 30%;
height: 30%;
background: pink;
transition: all 1s ease;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
.example:hover {
width: 10%;
height: 10%;
}
<div class="example"></div>
Is this what are you trying to achieve? using translate will change the position of the element based on the width and height of the element itself.
div, span {
width:30%;
height:30%;
background:pink;
transition:all 1s ease;
position:absolute;
transform: translate(-50%, -50%);
}
*:hover{
width:10%;
height:10%;
}
div{
top:25%;
left:25%;
}
span{
top:75%;
left:75%;
}
<div></div>
<span></span>
I have created css-cube and its rotating on :hover.
But Its rotation is based on one side of cube!
I want to rotate it from its center, like in this example. I was trying transform-origin property but not got desired result.
I have also tried placing one middle plane inside cube but hover is not working in that situation!
.contain {
width: 300px;
height: 300px;
-webkit-perspective: 500px;
perspective: 500px;
position: absolute;
}
.main {
position:relative;
width:100px;
height:100px;
margin:100px 100px;
background:#07a;
overflow:visible;
transition: all linear,transform cubic-bezier(0.4, 0.25, 0.14, 1.5),background cubic-bezier(0.4, 0.25, 0.14, 1.5);
transition-duration: 700ms;
-moz-transform-style: preserve-3d;
-webkit-transform-style: preserve-3d;
transform-style: preserve-3d;
transform-origin: center center;
}
.main:hover{
transform:rotateY(180deg);
}
.top, .right, .left, .bottom,.lid{
position:absolute;
width:100px;
height:100px;
z-indexd:999;
transition: all 1s ease;
}
.top {
background:crimson;
top:-100px;
transform-origin : 50% 100%;
transform:rotateX(-90deg);
}
.bottom {
background:crimson;
bottom:-100px;
transform-origin :100% 0%;
transform:rotateX(90deg);
}
.left {
background:#ccc;
left:-100px;
transform-origin :100% 0%;
transform:rotateY(90deg);
}
.right {
background:#ccc;
right:-100px;
transform-origin : 0% 0%;
transform:rotateY(-90deg);
}
.lid {
background:#07a;
transform: translateZ(170px);
transform-origin : 0% 0%;
transform:translateZ(100px);
}
<div class="contain">
<div class="main">
<div class="lid"></div>
<div class="top"></div>
<div class="right"></div>
<div class="left"></div>
<div class="bottom"></div>
</div>
</div>
The problem is that you need to set the transform origin in the center of the cube, and the cube is a 3d element. You are missing the 3rd dimension !
So it should be
transform-origin: center center 50px;
since your cube side is 100px
.contain {
width: 300px;
height: 300px;
-webkit-perspective: 500px;
perspective: 500px;
position: absolute;
}
.main {
position:relative;
width:100px;
height:100px;
margin:100px 100px;
background:#07a;
overflow:visible;
transition: all linear,transform cubic-bezier(0.4, 0.25, 0.14, 1.5),background cubic-bezier(0.4, 0.25, 0.14, 1.5);
transition-duration: 700ms;
-moz-transform-style: preserve-3d;
-webkit-transform-style: preserve-3d;
transform-style: preserve-3d;
transform-origin: center center 50px;
}
.main:hover{
transform:rotateY(180deg);
}
.top, .right, .left, .bottom,.lid{
position:absolute;
width:100px;
height:100px;
z-indexd:999;
transition: all 1s ease;
}
.top {
background:crimson;
top:-100px;
transform-origin : 50% 100%;
transform:rotateX(-90deg);
}
.bottom {
background:crimson;
bottom:-100px;
transform-origin :100% 0%;
transform:rotateX(90deg);
}
.left {
background:#ccc;
left:-100px;
transform-origin :100% 0%;
transform:rotateY(90deg);
}
.right {
background:#ccc;
right:-100px;
transform-origin : 0% 0%;
transform:rotateY(-90deg);
}
.lid {
background:#07a;
transform: translateZ(170px);
transform-origin : 0% 0%;
transform:translateZ(100px);
}
<div class="contain">
<div class="main">
<div class="lid"></div>
<div class="top"></div>
<div class="right"></div>
<div class="left"></div>
<div class="bottom"></div>
</div>
</div>
I added a translateZ to move the rotation axis, it looks a little more centered but still not like Desandro's ex.,
I read the documentation and I think you should checkout this! it explains a little bit about orgins and perspectives...
EDIT1:
integrated translateZ instead of transform origin (now it's perfect!!)
.contain {
width: 300px;
height: 300px;
-webkit-perspective:666px;
perspective: 666px;
position: absolute;
}
.main {
position:relative;
width:100px;
height:100px;
margin:100px 100px;
background:#07a;
overflow:visible;
transition: all 1s ease;
-moz-transform-style: preserve-3d;
-webkit-transform-style: preserve-3d;
transform-style: preserve-3d;
transform:translateZ(-50px)
}
.main:hover{
transform: translateZ(-50px) rotateY(180deg);
}
.top, .right, .left, .bottom,.lid,.front{
position:absolute;
width:100px;
height:100px;
z-index:999;
transition: all 1s ease;
}
.front{
background:yellow;
transform:rotateY( 0deg ) translateZ( 50px );
}
.left {
background:red;
transform:rotateY(90deg) translateZ( 50px );
}
.right {
background:purple;
right:-100px;
//transform-origin : 0% 0%;
transform:rotateY(-90deg) translateZ( 150px );
}
.lid {
background:green;
transform:rotateY(180deg) translateZ( 50px );
}
<div class="contain">
<div class="main">
<div class="front"></div>
<div class="lid"></div>
<div class="right"></div>
<div class="left"></div>
</div>
</div>
BTW CSS-transformations rock!!
I tried Adding "translateZ(-70px)" in the ".main:hover" and I think it's rotating centered.
With this will make when your cube is rotating make the translate some pixels to left and make feeling it's centered.
I want to zoom in onto the pencil when hovered over the image.
HTML:
<div>
</div>
CSS:
div {
width: 400px;
height: 267px;
border: 1px solid black;
background-image: url('http://i.imgur.com/n9q7jhm.jpg');
background-size: 400px 267px;
transition: all 1s ease;
}
div:hover{
background-size: 500px 333px;
background-position: -60px -60px;
}
JSFiddle: http://jsfiddle.net/AX59Y/
My naive attempt was to increase the size and change the position of the image, however as you can see from the jsfiddle, the transition is very jagged as it tries to accomplish both transitions at the same time.
Is there a better way?
Take the answer from SW4 and change the left and top changes for a transform origin
#image {
background-image: url('http://i.imgur.com/n9q7jhm.jpg');
background-size: 400px 267px;
background-position:center;
transition: all 1s ease;
width:100%;
height:100%;
transform: scale(1);
position:relative;
left:0;
top:0;
-webkit-transform-origin: 75% 75%;
transform-origin: 75% 75%;
}
#wrapper:hover #image {
-webkit-transform: scale(2);
transform: scale(2);
}
The 75% 75% is more or less the position of the pencil , but you can set it to whatever you want.
fiddle
You can use the transition to scale up and reposition the image on hover, in order to do this you'll need to wrap the image div within a parent with overflow hidden.
Demo Fiddle
HTML
<div id='wrapper'>
<div id='image'></div>
</div>
CSS
#wrapper {
width: 400px;
height: 267px;
border: 1px solid black;
overflow:hidden;
position:relative;
}
#image {
background-image: url('http://i.imgur.com/n9q7jhm.jpg');
background-size: 400px 267px;
background-position:center;
transition: all 1s ease;
width:100%;
height:100%;
transform: scale(1);
position:relative;
left:0;
top:0;
}
#wrapper:hover #image {
transform: scale(2);
-webkit-transform: scale(2);
left:-150px;
top:-100px;
}
If you change your transition to linear it looks much less 'jagged'.
transition: all 1s linear;
Not sure if this is the behaviour that you want.