I'm trying to create a button that sticks to the right sidfe of the screen. I want this button the turn 90" and stick 50% vertically. I can't find alot of help online, maybe you guys can help. See my code below, it currently isn't vertically aligned centred.
I also added a picture of how it looks. Thanks in advance!
My current code:
HTML
<button type="button" class="button">
<span class="button__text">Interaction Designer <br> # Company</span>
<span class="button__icon"></span>
</button>
CSS
.button {
position: absolute;
display :flex;
align-items: center;
justify-content: center;
z-index: 999;
top: 50%;
right: 0;
transform-origin: right bottom;
-webkit-transform: rotate(-90deg);
-moz-transform: rotate(-90deg);
-o-transform: rotate(-90deg);
-ms-transform: rotate(-90deg);
transform: rotate(-90deg);
Picture 2
body {
margin: 0;
}
.button {
position: fixed;
z-index: 999;
top: calc(50% - 120px);
left: unset;
right: -51px;
-webkit-transform: rotate(-90deg) translate(-50%, 0%);
-moz-transform: rotate(-90deg) translate(-50%, 0%);
-o-transform: rotate(-90deg) translate(-50%, 0%);
-ms-transform: rotate(-90deg) translate(-50%, 0%);
transform: rotate(-90deg) translate(-50%, 0%);
}
<button type="button" class="button">
<span class="button__text">Interaction Designer <br> # Company</span>
<span class="button__icon"></span>
</button>
<div style="height:100vh;"></div>
<div style="height:100vh;"></div>
Related
I want to display the text vertically. I've tried a tutorial that has text rotation. But it lefts space in right side. This is a code that I've to try and mixed with a little piece of code from the tutorial:
1. STYLE:
.list-group-item {
background: black;
}
.list-group {
text-align: center;
-webkit-transform-origin: 100% 0;
-moz-transform-origin: 100% 0;
-o-transform-origin: 100% 0;
transform-origin: 100% 0;
-webkit-transform: translate(-100%, 0) rotate(-90deg);
-moz-transform: translate(-100%, 0) rotate(-90deg);
-o-transform: translate(-100%, 0) rotate(-90deg);
transform: translate(-100%, 0) rotate(-90deg);
filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=3);
}
2. LIST:
<ul class="list-group">
<li class="list-group-item">A</li>
<li class="list-group-item">B</li>
<li class="list-group-item">C</li>
<li class="list-group-item">D</li>
<li class="list-group-item">E</li>
</ul>
3. GOAL:
4. RESULT:
try this:
.verticaltext
{
position: relative;
padding-left:50px;
margin:1em 0;
min-height:120px;
}
.verticaltext-content {
-webkit-transform: rotate(-90deg);
-moz-transform: rotate(-90deg);
-ms-transform: rotate(-90deg);
-o-transform: rotate(-90deg);
filter:progid:DXImageTransform.Microsoft.BasicImage(rotation=3);
left: -40px;
top: 35px;
position: absolute;
color: #FFF;
text-transform: uppercase;
font-size:26px;
font-weight:bold;
}
your html structure will look like this:
<div class="verticaltext">
<div class="verticaltext_content">Test 12</div>
</div>
you will need to set an absolute position in order to rotate the element in this case <li></li>. follow this link for further clarification
my web site retrokent.com
My problem is the logo is blurry. transform: translate and webkit-transform: translate
.nm-header.centered .nm-header-logo {
position: absolute;
top: 50%;
left: 50%;
z-index: 10;
-webkit-transform: translate(-50%, -50%);
-moz-transform: translate(-50%, -50%);
-ms-transform: translate(-50%, -50%);
-o-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
The problem is solved when I turn off the "transform: translate" and "webkit-transform: translate" features.
But then the logo is position shifting. How can I fix it? Can you help me?
screenshot-1 : https://prnt.sc/tr16j4
screenshot-2 : https://prnt.sc/tr16te
You can center your image without transform: translate(-50%, -50%) just change in your css.
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
text-align: center;
z-index: 10;
for responsive you can set text-align: center with media queries.
I'm trying to put a vertical bootstrap button on the left edge of the screen. Right now I have this CSS:
#button1 {
position: absolute !important;
z-index: 10 !important;
left: 0px !important;
bottom: 20% !important;
transform: rotate(90deg);
-ms-transform: rotate(90deg);
-moz-transform: rotate(90deg);
-webkit-transform: rotate(90deg);
-o-transform: rotate(90deg);
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet" />
<button id="button1" class="btn btn-lg btn-danger">Click to toggle popover</button>
The problem is that it's not all the way at the left side; it would be if it wasn't rotated but since it is, there is a gap of space. How do I fix this?
Add transform-origin: bottom left; to your button
#button1 {
position: absolute !important;
z-index: 10 !important;
left: 0px !important;
bottom: 20% !important;
transform: rotate(90deg);
-ms-transform: rotate(90deg);
-moz-transform: rotate(90deg);
-webkit-transform: rotate(90deg);
-o-transform: rotate(90deg);
transform-origin: bottom left;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet" />
<button id="button1" class="btn btn-lg btn-danger">Click to toggle popover</button>
Hope this helps :)
To learn more about transform-origin property, visit
https://www.w3schools.com/cssref/css3_pr_transform-origin.asp
You can keep your button inside a span and set width of the span manually to stick it to the left of the screen. Here's the working code:
#button1 {
position: absolute !important;
z-index: 10 !important;
left: 0px !important;
bottom: 35% !important;
transform: rotate(90deg);
-ms-transform: rotate(90deg);
-moz-transform: rotate(90deg);
-webkit-transform: rotate(90deg);
-o-transform: rotate(90deg);
width: 45px;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet"/>
<span id="button1">
<button class="btn btn-lg btn-danger">Click to toggle popover</button>
</span>
<div style="width: 100%; position:fixed; display: block;" class="parent">
<div class="child" style="width: 100%; height: 30px; ">mid</div>
</div>
I am going to set the div with the 'child' class in the mid-page using css.
The parent div's position will be fixed.
how do I have to do?
To position an element centered in the screen:
/* Staple class for V and H centered element */
.vertical-and-horizontally-centered-element {
position: fixed;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
/* support for cross browser compatibility */
-webkit-transform: translate(-50%, -50%);
-moz-transform: translate(-50%, -50%);
-ms-transform: translate(-50%, -50%);
-o-transform: translate(-50%, -50%);
}
To center the text within in the center of the element use text-align: center. After we put together all your code, you get the following result:
.parent {
width: 100%;
height: 100%;
position: fixed;
display: block;
}
.child {
height: 30px;
position: fixed;
top: 50%;
left: 50%;
text-align: center;
transform: translate(-50%, -50%);
/* support for cross browser compatibility */
-webkit-transform: translate(-50%, -50%);
-moz-transform: translate(-50%, -50%);
-ms-transform: translate(-50%, -50%);
-o-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
}
<div class="parent">
<div class="child">mid</div>
</div>
Another comment, move your inline CSS to its own CSS file, unless you must keep it inline for specific reasons... my two cents :-)
Let me know if you have any questions in the comments below.
Here is everthing centered: https://jsfiddle.net/16q2xr8k/5/
.parent{background-color: lightblue;}
.child{
background-color: lightgreen;
text-align: center;
margin-left: 50%;
position: relative;
top: 50%;
-webkit-transform: translate(-50%, -50%);
-moz-transform: translate(-50%, -50%);
-ms-transform: translate(-50%, -50%);
-o-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
}
I have an image and a div over it which is working as a wrapper for the image, I am trying to rotate a square div over let's say 45 deg. to give it a diamond like shape so actually it comes as the image is being cut in a diamond like shape.
The issue is when I rotate the div the image and other things in it also gets rotated than I have to rotate those images back let's say -45deg to bring them to original place.
This is doing above involved a lot of rotating which is almost un-necessary, plus it's really not that simple for me to get it right for images and text of different size etc.
If only I can work out something through which on the above div gets rotated and elements inside it remain like how they are it will be great.
Can anyone suggest anything please?
My markup is:
<div class="wrapper" id="01">
<a href="#">
<img src="image.gif" />
<span class="text" id="text01">Lorem Ispum </span>
</a>
</div>
CSS:
.wrapper {
-webkit-backface-visibility: hidden;
position: relative;
width: 300px;
height: 300px;
margin: 0 30px 0 0;
overflow: hidden;
float: left;
-moz-transform: matrix(-0.5,-0.5,0.5,-0.5,0,0);
-moz-transform-origin: center;
-webkit-transform: matrix(-0.5,-0.5,0.5,-0.5,0,0);
-webkit-transform-origin: center;
-o-transform: matrix(-0.5,-0.5,0.5,-0.5,0,0);
-o-transform-origin: center;
-ms-transform: matrix(-0.5,-0.5,0.5,-0.5,0,0);
-ms-transform-origin: center;
transform: matrix(-0.5,-0.5,0.5,-0.5,0,0);
transform-origin: center;
-ms-filter: "progid:DXImageTransform.Microsoft.Matrix(M11=-0.5,M21=-0.5,M12=0.5,M22=-0.5,SizingMethod='auto expand')";
filter: progid:DXImageTransform.Microsoft.Matrix(M11=-0.5,M21=-0.5,M12=0.5,M22=-0.5,SizingMethod='auto expand');
cursor: pointer;
}
.wrapper img {
width: 700px;
margin: -10px 0 0 -245px;
-moz-transform: rotate(135deg);
-moz-transform-origin: center;
-webkit-transform: rotate(135deg);
-ms-transform: rotate(135deg);
-o-transform: rotate(135deg);
transform: rotate(135deg);
-webkit-transform-origin: center;
-o-transform-origin: center;
-ms-transform-origin: center;
transform: matrix(-0,-0,0,-0,0,0);
transform-origin: center;
-ms-filter: "progid:DXImageTransform.Microsoft.Matrix(M11=-0,M21=-0,M12=0,M22=-0,SizingMethod='auto expand')";
filter: progid:DXImageTransform.Microsoft.Matrix(M11=-0,M21=-0,M12=0,M22=-0,SizingMethod='auto expand');
}
span.text {
background-color: rgba(255,255,255,0.7);
-webkit-transform: rotate(180deg);
margin: -475px 0 0 -1px;
float: left;
width: 296px;
height: 42%;
z-index: 100;
position: relative;
padding: 4px;
display: none;
font-size: 1.2em;
}