I have a div (tab) that I rotate 270 degrees like so:
-webkit-transform-origin: 100% 0%;
-webkit-transform: rotate(270deg);
(Example here: http://users.telenet.be/prullen/align.html)
When I want to align the tab with the top edge of the content box, it's pretty easy. i just set "top" to "3px" (the border size). However, for the bottom it's another story.
It appears I need to calculate this with jquery like so:
$tab.css('bottom', (Math.abs($tab.outerWidth()-$tab.outerHeight())
(Though for this example I'm just using a static value. It may not look exactly like I want it to in your browser, here's an image: )
I was wondering if there is a better way since this does not seem to work all that well in firefox for example (1 pixel shift). Is there an easier way by adjusting the transform-origin perhaps?
(Note that I need to keep the same div structure I have now)
Ideally it'd be as easy as setting bottom to: 3px (the border thickness)
Thanks.
When you want to put the tab at the top of the sticky, apply the class .tab-top to the .sticky-tab element.
.tab-top {
transform-origin: 100% 0%;
transform: rotate(270deg);
top: 5px; /*Border Size*/
right: 5px; /*Border Size*/
}
When you want to put the tab at the bottom of the sticky, apply the class .tab-bottom to the .sticky-tab element.
.tab-bottom {
transform-origin: 100% 100%;
transform: rotate(270deg) translateX(100%);
bottom: 0;
right: -18px; /*Height (appearing as width once rotated) of the tab*/
}
Essentially you want to change the transform origin to be at the bottom right-hand corner of the element and then attach the element to the bottom of its parent. This will place the element exactly below the .sticky. Then use the translateX(100%) to force the bottom of the .sticky-tab to align with the bottom of the .sticky.
Related
I want to animate some sort of floating div.
When the div is in the status 'close' , most of it is hidden on the right of the screen, with only 20px still visible.
When I click on the visible part, the div move to the center of the screen, revealing itself.(it's what I call the status open)
My issue are:
I only know how center a div with margin:auto, which do weird stuff when I animate it
when the div is 'closed', the 'hidden' part create an overflow who add a scrolling. I don't want that
the div have a width who change a lot, depending of the case. Consequently, I cannot use a lot of hard coded value in CSS.
Any idea how to do this?
Even a partial solution would help me.
Edit : the solution (thanks to #sonic)
.open{
translateX(-50%);
left:50%;
}
.close {
translateX(-20px);
left:100%;
}
Its too open question to be able to help with 2,3 points, its hard even to say what is the objective and without code, who knows...
Centering div like that:
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
you can easly animate those properties.
I just want to know with the experience of the others which solution do you use generally to position an element out of the natural flow?
- Transform: translate
- Position: Absolute.
Thank's :)
All depends.
position:absolute actually can work together with transform:translate. For example, if you want to place a div (dynamic height/width) you can do below:
<div id="mydiv">
<!-- Dynamic content here meaning height and width could change -->
</div>
#mydiv {
position: absolute;
top: 50%; /* Top of element would appear in the centre */
left: 50%; /* Left of element would appear in the centre */
transform: translate(-50%, -50%); /* Bring the element centre to area centre */
/* I'm lazy to make above lines cross browser but you shouldn't */
}
In above case, if the parent element is the full height and width of the window, the box will stay in the centre.
Hope this give you some inspirations.
position : absolute
*this does pose issues for responsive pages.
Closed. This question needs to be more focused. It is not currently accepting answers.
Want to improve this question? Update the question so it focuses on one problem only by editing this post.
Closed 6 years ago.
Improve this question
I want to make a sidebar where the text is rotated and centered inside the sidebar. I want this in text and css, not background image or something...
How would something like this be done in css?
I have tried to use transform: rotate(7deg); and stuff, but I can't position it correctly.
Here is a codepen with the basic structure. The topbar should be on the left side of the screen (like in the picture).
This also has to be responsive. And when you click the menu toggle the sidebar slides open so the text should be easily hidden with some css/js.
Thanks
ANSWERED:
The answer from #darrylyeo was the right fix for me. Much simpeler to make up the div as you would (horizontally) and then rotate the whole div.
Rotation text inside a div seemed to be more difficult to position right all the responsive breakpoints.
Positioning With Transforms: The Process
Determine what the dimensions are, before any transformations.
Choose an anchor point, or origin, to base the transformation on. Finding the best anchor point for your purpose may take some trial and error.
Based on that anchor point, figure out where to position the element.
Finally, apply the transformation.
First Attempt
.sidebar {
background: #f6f6f6;
width: 100vh;
height: 60px;
transform-origin: bottom left;
position: absolute;
left: 60px;
bottom: 0;
transform: rotate(-90deg);
}
Explanation
To visualize this best, add one property at a time in order as listed.
Apply a background color so we can see where the side bar is.
Set the width to 100% the height of the viewport.
Set the height to (say) 60 pixels.
Position absolutely (fixed would work as well).
Set the transformation anchor point to the bottom left corner.
Position 60 pixels from the left (or whatever you set the height to be), and 0 pixels from the bottom.
Now, rotate around the anchor point counterclockwise by 90 degrees.
Downside
You can't adjust height without having to change left accordingly.
Better Attempt
.sidebar {
background: #f6f6f6;
width: 100vh;
height: 60px;
transform-origin: top left;
position: absolute;
left: 0;
top: 100%;
transform: rotate(-90deg);
}
Explanation
Same as the first solution, except:
Set the transformation anchor point to the top left corner.
Position 0 pixels from the left, and 100% from the top. This means that the top of the element touches the bottom of the viewport.
Now, rotate around the anchor point counterclockwise by 90 degrees.
Now, to expand the sidebar, we have only to change one property: height.
You will achieve this with some JS the easiest.
Click Event the the Menu trigger, and then the eventhandler function to animate the menu on and off screen. For the rotate text functionality, if I understood properly what you want, all you need is this:
#menu li {
margin-top: 3px;
font-size: 14pt;
transition:.5s;
}
li:hover{
-webkit-transform: rotateX(360deg);
transform: rotateX(360deg);}
Here the link to a code pen, click the pink top left menu logo and then hover over the list items.
http://codepen.io/damianocel/pen/XXbymL
Please check the demo
I have two divs the first div is used for showing the scroll-bar and the second div is used for the rotation of inner contents of the div.
My question is why scroll-bar is showing even if there is no overflow of the inner contents.
Please check the demo and tell me what I am doing wrong here and how to overcome this issue or any alternative way to achieve this.
HTML
<div style="width: 1096px; height: 434px; overflow: auto; position: relative; border:solid 5px #555555">
<div id="RotationDiv">
<img style="left: 54px; top: 337px; width: 326px; height: 422px; position: absolute;" src="http://fc01.deviantart.net/fs70/f/2012/304/6/b/walfas_custom___vending_machine_2_by_grayfox5000-d5jljhe.png" />
</div>
</div>
CSS
#RotationDiv {
-ms-transform-origin: 539px 539px;
-webkit-transform-origin: 539px 539px;
width: 434px;
height: 1096px;
overflow: visible;
-ms-transform: rotate(90deg);
-webkit-transform: rotate(90deg);
background-color:Red;
}
You are using transform so it changes visual formatting model of an element.
From MDN:
The CSS transform property lets you modify the coordinate space of the
CSS visual formatting model. Using it, elements can be translated,
rotated, scaled, and skewed according to the values set.
A line again from MDN:
By modifying the coordinate space, CSS transforms change the position
and shape of the affected content without disrupting the normal
document flow. This guide provides an introduction to using
transforms.
From W3C : 2 Module Interactions
This module defines a set of CSS properties that affect the visual
rendering of elements to which those properties are applied; these
effects are applied after elements have been sized and positioned
according to the Visual formatting model from [CSS21]. Some
values of these properties result in the creation of a containing
block, and/or the creation of a stacking context.
So you have a parent element with the dimensions below.
width: 1096px;
height: 434px;
Now you are transforming that element using
-webkit-transform: rotate(90deg);
So here, the element transforms visually, but not literally, in other words though you transform an element, it takes the space physically on a document just like a static element takes, it just visually transforms the element. I will share a diagram which will make you understand in a better way..
So though you transformed your element like this, but still the vertical space was taken up because of the height of your transformed element, which did transformed visually, but not literally...
So, now what's the solution? Use position: absolute; on the child element, and anyways you are using position: relative; on the parent.
Demo
#RotationDiv {
-ms-transform-origin: 539px 539px;
-webkit-transform-origin: 539px 539px;
width: 434px;
height: 1096px;
position: absolute;
overflow: visible;
-ms-transform: rotate(90deg);
-webkit-transform: rotate(90deg);
background-color:Red;
}
Lets have a test case, I've the styles like below
.parent .transformed {
height: 200px;
width: 200px;
background: #f00;
-moz-transform: rotate(120deg);
-webkit-transform: rotate(120deg);
transform: rotate(120deg);
-moz-transform-origin: 300px 300px;
-webkit-transform-origin: 300px 300px;
transform-origin: 300px 300px;
}
.parent .static {
background: #00f;
height: 200px;
width: 200px;
}
Test Case
Here, I am transforming an element having class of .transformed so if you see, the element does transform and am also modifying the origin, but the next box won't move up, as the transformed element take up literal space in the flow, it doesn't get out of the flow like position: absolute; does, but well that's the separate concept.
So you need to use position: absolute; or your div will still take up space vertically and thus you see that scroll bar ...
Poopy IE Compatible Solution
As you commented, well, yes, IE will still show the scroll bar as the element which is positioned absolute still exists in the same dimensions, so what's the workout here?
Firstly, you are transforming the element to set in the parent container, also, you don't need the overflow so the first question is if you don't need overflow than why use auto? You can use hidden.
If not hidden to the parent, and you are looking forward to place some content beneath the transformed element, than better you wrap the transformed element inside another element with the same dimensions set to overflow: hidden; and make sure you move the position: absolute; property to this block. - Demo
If still not happy? Then why transform entire element? transform relevant image only - Demo
This is because it is still using the vertical properties (Just as hmore009 said in the comments).
If we take a look here you can see what its doing so you know this is true.
Example 1:
So your height and width for the container are as follows:
width: 1096px;
height: 434px;
Now you have done the right thing and swap them for the transform #RotationDiv:
width: 434px;
height: 1096px;
This works fine if we were to change the container to overflow: hidden; this means we cant see any extra height.
DEMO HERE
Example 2:
But I guess for some reason you don't want to do that, probably due to not knowing why the overflow is caused. So lets take a closer look at what is going on.
If we remove the height from #RotationDiv the overflow is no longer there. Thats a bit wired isn't it? Well no, the height was was being used for both the transform and the vertical height.
DEMO HERE
So how can we know it was the height causing this?
Now if we give #RotationDiv the same height as the container we can see there is no overflow.
DEMO HERE
Now if we add 1px onto that height we get the overflow kicking in. Hmm, so the height must be causing this. Even tho we are transforming the height seems to still be being used for the vertical height in the container.
DEMO HERE
How can we fix this?
Well we already have seen one option, give the container overflow: hidden; or just removing it altogether. This will stop the scrolling within the container.
DEMO HERE
Or you could just get an image editor (there are some free online ones) and flip the image like that. Would save a lot of trouble doing it this way.
Other then that you could flip the image only remove #RotationDiv and give the container background: red;
DEMO HERE
How I would do it still using transform:
I would take off the overflow: auto;, remove the unneeded div and set the transform on the img.
It's up to you how you want to do it, there are many ways. The best way I would say it don't use transform and just flip the image using an image editor (e.g. Photoshop).
DEMO HERE
I have created a message tool tip like :
But it consists of an image of :
And a regular div to the right. (with text inside)
However , I prefer not to do it with image. I want to create the triangle part with rotated div.
I've managed to do it here by creating a simple div and rotate it:
transform: rotate(45deg);
-ms-transform: rotate(45deg); /* IE 9 */
-webkit-transform: rotate(45deg); /* Safari and Chrome */
and the result is :
However (and this is my question) -- can I remove the right part of the rotated div , so i'll only have :
Is it possible ?
p.s. - I know thtat I can hide the right part with div by using another div with position relative/absolute. but I want to know if there is a solution with removing the right part. (or maybe , is there any code to create triangle ?). Also lets assume the angle is 90 deg. like in the red div.
You can do this without rotating the element, wrap this inside a position relative element, and use position absolute to set it right
Demo
.left {
width: 0;
height: 0;
border-top: 10px solid transparent;
border-bottom: 10px solid transparent;
border-right:10px solid #001744;
}