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>
Related
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>
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
Please refer to code. While coding in bootstrap, I have deliberately placed one element at col-xs-4 having col-xs-offset-8 and another element at col-xs-2 in a single row; which means that the element having col-xs-2 is pushed to the next row. This works just fine. But, after I use absolute positioning for the col-xs-4 col-xs-offset-8 element, the subsequent element is also displaced. How can I avoid the next element from being displaced?
Also, to have responsive design, I don't want to use height and width properties on the cubespinner class and instead use the full horizontal space and the height of the image to be used by the col-xs-4 container. Like, currently, the animation works fine in full screen but not in resized windows. How best to achieve this?
Here is my code:
<!DOCTYPE html>
<html lang="en-US">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=0.5">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<title>Test</title>
</head>
<body>
<style>
html,
body {
height: 100%;
}
body {
background-color: #111;
}
.navibar {
margin-top: 0px;
font-size: 18px;
}
.cubespinner {
-webkit-animation: spincube 10s alternate infinite;
animation: spincube 10s alternate infinite;
-webkit-transform-style: preserve-3d;
-moz-transform-style: preserve-3d;
-ms-transform-style: preserve-3d;
transform-style: preserve-3d;
-webkit-transform-origin: 53px 53px 0;
-moz-transform-origin: 53px 53px 0;
-ms-transform-origin: 53px 53px 0;
transform-origin: 53px 53px 0;
}
.cubespinner div {
position: absolute;
width: 440px;
height: 100px;
margin-top: 3px;
font-family: 'Baloo Paaji', cursive;
text-align: center;
color: #ddd;
text-decoration: underline;
border: 1px solid #888;
background: rgba(75, 105, 105, 0.8);
box-shadow: inset 0 0 20px rgba(250, 250, 250, 0.5);
-webkit-backface-visibility: hidden;
}
.cubespinner a:link {
color: #ddd;
text-decoration-color: #ddd;
}
.cubespinner a:visited,
.cubespinner a:hover,
.cubespinner a:active {
color: #5bc0de;
text-decoration-color: #5bc0de;
}
.face1 {
-webkit-transform: rotateX(0deg) translateZ(50px);
-moz-transform: rotateX(0deg) translateZ(50px);
-ms-transform: rotateX(0deg) translateZ(50px);
transform: rotateX(0deg) translateZ(50px);
}
.face2 {
-webkit-transform: rotateX(90deg) translateZ(50px);
-moz-transform: rotateX(90deg) translateZ(50px);
-ms-transform: rotateX(90deg) translateZ(50px);
transform: rotateX(90deg) translateZ(50px);
}
.face3 {
-webkit-transform: rotateX(180deg) translateZ(50px);
-moz-transform: rotateX(180deg) translateZ(50px);
-ms-transform: rotateX(180deg) translateZ(50px);
transform: rotateX(180deg) translateZ(50px);
}
.face4 {
-webkit-transform: rotateX(270deg) translateZ(50px);
-moz-transform: rotateX(270deg) translateZ(50px);
-ms-transform: rotateX(270deg) translateZ(50px);
transform: rotateX(270deg) translateZ(50px);
}
#-webkit-keyframes spincube {
0%,
100% {
-webkit-transform: rotateX(0deg) rotateY(0deg) rotateZ(0deg);
}
25% {
-webkit-transform: rotateX(-90deg);
}
50% {
-webkit-transform: rotateX(-180deg);
}
75% {
-webkit-transform: rotateX(-270deg);
}
}
#keyframes spincube {
0%,
100% {
-moz-transform: rotateX(0deg) rotateY(0deg) rotateZ(0deg);
-ms-transform: rotateX(0deg) rotateY(0deg) rotateZ(0deg);
transform: rotateX(0deg) rotateY(0deg) rotateZ(0deg);
}
25% {
-moz-transform: rotateX(-90deg);
-ms-transform: rotateX(-90deg);
transform: rotateX(-90deg);
}
50% {
-moz-transform: rotateX(-180deg);
-ms-transform: rotateX(-180deg);
transform: rotateX(-180deg);
}
75% {
-moz-transform: rotateX(-270deg);
-ms-transform: rotateX(-270deg);
transform: rotateX(-270deg);
}
}
</style>
<div class="container-fluid">
<div class="row">
<div class="col-xs-4 col-xs-offset-8">
<div class="cubespinner">
<div class="face1">
<img class="img-responsive" src="images/nitt.png" alt="logo">
</div>
<div class="face2">
<a href="#" target="_blank">
<h2 class="text">Text for Test Purposes</h2>
</a>
</div>
<div class="face3">
<img class="img-responsive" src="images/nitt.png" alt="logo">
</div>
<div class="face4">
<a href="#" target="_blank">
<h2 class="text">Text for Test Purposes</h2>
</a>
</div>
</div>
</div>
<div class="col-xs-4 col-md-2">
<ul class="nav nav-pills nav-stacked navibar">
<li class="active"><i class="fa fa-home" aria-hidden="true"></i>   Test1</li>
<li><i class="fa fa-question-circle" aria-hidden="true"></i>   Test2</li>
<li><i class="fa fa-briefcase" aria-hidden="true"></i>   Test3</li>
<li><i class="fa fa-users" aria-hidden="true"></i>   Test4</li>
<li><i class="fa fa-address-book" aria-hidden="true"></i>   Test5</li>
</ul>
</div>
</div>
</body>
</html>
EDIT: Added an image of the look I'm trying to achieve. I want this look long long with the present animation.
When you add position:absolute on an object you take it completely out of the normal DOM flow. As a result, anything you place after it will adjust as though the absolutely positioned element does not exist and simply reflow to fill the gap.
To resolve this, YOU SHOULD NEVER put abs pos on the grid elements.
Absolute should be applied to the contents of the grid, not the grid itself. This will prevent your issue from happening.
So, just put whatever you need to remain in position inside of your grid, and then apply the positioning to those elements. The rest of the page will flow as it should.
Alternately, if you set position:relative of the parent, and position:absolute on the child, you can move the child relative to the parent without impacting the rest of your DOM.
"Ugh, yet another css octagon".
This is something different, I swear. I did read similar questions on StackOverflow.
I would like to have the following on my page:
html {
box-sizing: border-box;
}
*,
*:before,
*:after {
box-sizing: inherit;
}
.octagon {
display: inline-block;
position: relative;
overflow: hidden;
-webkit-transform: rotate(22.5deg) scale(0.9) translateY(-4px);
-moz-transform: rotate(22.5deg) scale(0.9) translateY(-4px);
-ms-transform: rotate(22.5deg) scale(0.9) translateY(-4px);
-o-transform: rotate(22.5deg) scale(0.9) translateY(-4px);
transform: rotate(22.5deg) scale(0.9) translateY(-4px);
}
div.octagon > * {
position: relative;
overflow: hidden;
-webkit-transform: rotate(45deg);
-moz-transform: rotate(45deg);
-ms-transform: rotate(45deg);
-o-transform: rotate(45deg);
transform: rotate(45deg);
background: transparent;
border: 4px solid;
margin: 0;
}
div.octagon > *:after {
position: absolute;
/* There needs to be a negative value here to cancel
* out the width of the border. It's currently -4px,
* but if the border were 5px, then it'd be -5px.
*/
top: -4px;
right: -4px;
bottom: -4px;
left: -4px;
-webkit-transform: rotate(45deg);
-moz-transform: rotate(45deg);
-ms-transform: rotate(45deg);
-o-transform: rotate(45deg);
transform: rotate(45deg);
content: '';
border: inherit;
}
div.octagon > * > img {
display: block;
-webkit-transform: rotate(-67.5deg) scale(1.1) translateZ(0);
-moz-transform: rotate(-67.5deg) scale(1.1) translateZ(0);
-ms-transform: rotate(-67.5deg) scale(1.1) translateZ(0);
-o-transform: rotate(-67.5deg) scale(1.1) translateZ(0);
transform: rotate(-67.5deg) scale(1.1) translateZ(0);
backface-visibility: hidden;
}
.green .octagon {
color: green;
}
/* Grouping */
.octagons {
position: relative;
display: inline-block;
/* To take dimension of the main octagon */
margin-left: 30px;
font-size: 0;
/* Remove white space */
}
.background.octagon {
position: absolute;
width: 100%;
height: 100%;
}
.background.octagon > * {
width: 100%;
height: 100%;
}
.left.octagon {
left: -30px;
}
.right.octagon {
right: -30px;
}
<div class="green octagons">
<div class="left background octagon">
<div> </div>
</div>
<div class="right background octagon">
<div> </div>
</div>
<div class="octagon">
<p>
<img src="https://placeholdit.imgix.net/~text?txtsize=25&txt=People&w=175&h=175" alt="" width="175" height="175" />
</p>
</div>
</div>
As you probably see, this is a "div soup". Because the main octagon needs to clip the image, it needs to have the same variable dimension as the image. Also, the octagons have border and are responsive, so I can't use "border hack".
The two background octagons only need the borders, but it need to be the same dimension as the image as well.
I can't use SVG because the image will be entered by end-user.
My question is then: Is there a cleaner way to do this?
I know how to rotate text 90 degrees using CSS, but I'm trying to align the text to the top-right of the page (or a parent element) as its 90-degree-rotated self. Is this possible?
Example:
Neither of the previous solutions work for any amount of text. You need to use transform-origin.
<div class="container">
<span class="rotate">Hello THERE!</span>
</div>
.rotate {
-webkit-transform: rotate(90deg);
-webkit-transform-origin: left top;
-moz-transform: rotate(90deg);
-moz-transform-origin: left top;
-ms-transform: rotate(90deg);
-ms-transform-origin: left top;
-o-transform: rotate(90deg);
-o-transform-origin: left top;
transform: rotate(90deg);
transform-origin: left top;
position: absolute;
top: 0;
left: 100%;
white-space: nowrap;
font-size: 48px;
}
My first time answering something very new to this but here is the code:
<div id="block">
<p id="rotate">Hello!!!</p>
</div>
<style>
#block{
width:500px;
height:500px;
display:block;
margin:auto;
border: 1px solid #000;
position:absolute;
}
#rotate {
position:relative;/* place the text relateve to whatever tag is devined as absolute */
left:130px;/* change these dimensions - can use left or right */
top:20px;/* change these dimensions can use top or bottom*/
-webkit-transform: rotate(-90deg);
-moz-transform: rotate(-90deg);
-ms-transform: rotate(-90deg);
-o-transform: rotate(-90deg);
}
</style>
The solution is simple,add the rotation in text and position absolute.
<style>
#block{
width:500px;
height:500px;
display:block;
margin:auto;
border: 1px solid #000;
position:relative;
}
#text {
padding:0;
margin:0;
position:absolute;
right:0;
font-size:30px;
top:40px;
-webkit-transform: rotate(-90deg);
-moz-transform: rotate(-90deg);
-ms-transform: rotate(-90deg);
-o-transform: rotate(-90deg);
}
</style>
<div id="container">
<p id="text">Hello!!!</p>
</div>