This question already has an answer here:
Text overflowing out of div using transform: rotate(xdeg)
(1 answer)
Closed 8 years ago.
I have twisted the text to a 270 degree angle. my problem is aligning it inside another div.
Here is the image before I twisted the text:
and this is my my code for that for this:
#infoside {
background-color: #00ff00;
float: right;
height: 100%;
width: 41%;
}
#tabbings {
float: left;
width: 15%;
height: 100%;
background-color: #ffff00;
}
#tab_panels {
float: right;
width: 85%;
height: 100%;
background-color: #00ffff;
}
#client_info {
height: 100px;
width: 100%;
}
<div id="infoside">
<div id="tabbings">
<div id="client_info" class="active_tabbing">
<div id="text_here" style="width: 100px; height: 25%; text-align: center">
CLIENT INFO
</div>
</div>
<div class="clear"></div>
</div>
<div id="tab_panels"></div>
<div class="clear"></div>
</div>
and when I add this class to the div with id text_here that will twist the text the image below will be the result
.twist_text {
-moz-transform: rotate(270deg);
-webkit-transform: rotate(270deg) ;
-o-transform: rotate(270deg) ;
-ms-transform: rotate(270deg) ;
transform: rotate(270deg);
filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=1);
}
How do I make this be inside the square?
Thank you.
You need to use transform-origin:0 0; on your CSS to set the rotation axis on the top left of your div. By default, it is set at 50% 50%, and you can set it to any value you like.
If i got it........
Try this
.twist_text {
-moz-transform: rotate(270deg) translateX(-35px);
-webkit-transform: rotate(270deg) translateX(-35px) ;
-o-transform: rotate(270deg) translateX(-35px) ;
-ms-transform: rotate(270deg) translateX(-35px) ;
transform: rotate(270deg) translateX(-35px);
}
after that it will look like below
Related
I have a table and want to add an accordion toggle to certain rows to reveal more info. I found a nice looking +/- animation to go with the accordion toggle, but can't seem to get it to center correctly within my td. My code looks like this so far:
<tr ng-repeat="item in c.list track by $index" ng-if="$index >= data.window_start && $index < data.window_end">
<td>
<div ng-class="{'accordion-toggle collapsed':item.work_history_type == 'Uniformed Service'}" data-toggle="collapse" href="#{{item.sys_id}}" role="button" aria-expanded="false" aria-controls="collapseDetails"></div>
</td>
<td>{{item.work_history_type}}
</td>
<td>{{item.work_name}}
<div id="{{item.sys_id}}" class="collapse">
<div ng-repeat="item2 in c.list2 | filter: {'uni' : item.sys_id}">
<span ng-click="c.newEntry(item2.sys_id, 'campaign_table','newWork')"class="h4 edit" >{{item2.camp}}: From: {{item2.from}} To: {{item2.to}}</span>
</div>
</div>
</td>
<td>{{item.from}}</td>
<td>{{item.to}}</td>
</tr>
My CSS looks like this:
.accordion-toggle {
position: relative;
}
.accordion-toggle::before,
.accordion-toggle::after {
content: '';
display: block;
position: absolute;
width: 12px;
height: 2px;
background-color: $color-darkest;
-webkit-transform-origin: 50% 50%;
-ms-transform-origin: 50% 50%;
transform-origin: 50% 50%;
-webkit-transition: all 0.25s;
transition: all 0.25s;
}
.accordion-toggle::before {
-webkit-transform: rotate(-90deg);
-ms-transform: rotate(-90deg);
transform: rotate(-90deg);
opacity: 0;
}
.accordion-toggle.collapsed::before {
-webkit-transform: rotate(0deg);
-ms-transform: rotate(0deg);
transform: rotate(0deg);
opacity: 1;
}
.accordion-toggle.collapsed::after {
-webkit-transform: rotate(-90deg);
-ms-transform: rotate(-90deg);
transform: rotate(-90deg);
}
.accordion-toggle > span {
margin-left: 20px;
}
The end result looks like this:
The plus signs are not aligned correctly, any guidance on how to fix this?
Thanks!
I'm going to assume you are talking about vertically aligning the plus signs inside the td, although the sentence at the bottom says they are aligned correctly, but they are aligning to the top rather than vertical center.
Since they are absolutely positioned you need to give them a place to be within the container. Try taking a look at this codepen: https://codepen.io/samandalso/pen/LrbpqJ
.accordion-toggle::before,
.accordion-toggle::after {
content: '';
display: block;
position: absolute;
width: 12px;
height: 2px;
background-color: red;
-webkit-transform-origin: 50% 50%;
-ms-transform-origin: 50% 50%;
transform-origin: 50% 50%;
-webkit-transition: all 0.25s;
transition: all 0.25s;
top: 50%;
left: 0;
}
Fixed codepen link :)
Try centering it with
.accordion-toggle > span {
margin-left:20%;
top:50%;
}
I am a bit confused: I want to create some parallelograms and put text into it. But as i put text into it, the text aligns to the shape of the parallelogram. Here is what ive tried
.parallelogram {
width: 130px;
height: 75px;
background: blue;
-webkit-transform: skew(20deg);
-moz-transform: skew(20deg);
-o-transform: skew(20deg);
transform: skew(20deg);
}
<div class="parallelogram">
<div>
<p>Projects</p>
</div>
</div>
So as you can see, i created a Div within a class, that creates the parallelogram. Now if i try to put another p tag as child into the div tag that contains the shape, my text looks not normally. Is there any way to remove the inerhit of the child? So my text would look normaly or is there even a better way? Thanks
.parallelogram {
width: 130px;
height: 75px;
background: blue;
-webkit-transform: skew(20deg);
-moz-transform: skew(20deg);
-o-transform: skew(20deg);
transform: skew(20deg);
}
.parallelogram p{
transform: skew(-20deg);
}
<div class="parallelogram">
<div>
<p>Projects</p>
</div>
</div>
.parallelogram p{
transform: skew(-20deg);
}
I think you trying something like this :
.parallelogram {
width: 300px;
height: 100px;
background-color: green;
transform: skewX(30deg);
transform-origin: top;
margin: 10px;
display: flex;
justify-content: center;
align-items: center;
}
.parallelogram > span {
transform: skewX(-30deg);
}
<div class="parallelogram">
<span>Projects</span>
</div>
I have to apply skew and rotate on an element. It works fine but the skewed text isn't left aligned in it's container (see the result image):
The text on the left is overflowing the container: the H (from "Hello") and the T (from "The") alignment is not right.
This is what I am trying to achieve:
.skew-parent-wrapper {
width: 300px;
margin-left: 100px;
margin-top: 50px;
border: 1px solid red;
padding-bottom: 30px;
}
.skew-text {
-moz-transform: rotate(-10deg) skew(-30deg, 0deg);
-webkit-transform: rotate(-10deg) skew(-30deg, 0deg);
-o-transform: rotate(-10deg) skew(-30deg, 0deg);
-ms-transform: rotate(-10deg) skew(-30deg, 0deg);
transform: rotate(-10deg) skew(-30deg, 0deg);
}
<div class="skew-parent-wrapper">
<h1 class="skew-text">Hello Welcome to the skew text</h1>
</div>
One way of aligning the skewed text on a vertical line is to manualy set a negative text-indent. This technique also requires to set a transform-origin on bottom left :
.skew-parent-wrapper {
width: 300px;
margin-left: 100px;
margin-top: 50px;
border: 1px solid red;
padding-top: 30px;
}
.skew-text {
transform: rotate(-10deg) skew(-30deg, 0deg);
transform-origin: 0 100%;
text-indent: -15px;
}
<div class="skew-parent-wrapper">
<h1 class="skew-text">Hello Welcome to the skew text</h1>
</div>
This technique works on text that wraps only on two lines. For text with more than 2 lines, you will need to wrap each line in a tag (like a <span>) :
.skew-parent-wrapper {
width: 300px;
margin-left: 100px;
margin-top: 50px;
border: 1px solid red;
padding-top: 30px;
}
.skew-text span{
display:block;
transform: rotate(-10deg) skew(-30deg, 0deg);
transform-origin: 0 100%;
}
<div class="skew-parent-wrapper">
<h1 class="skew-text">
<span>Hello Welcome to the</span>
<span>skewed text with</span>
<span>several lines many</span>
<span>many many lines</span>
</h1>
</div>
Note that you need to set the <span> to display:block because transforms don't apply on inline elements.
With rotation and skew you will get a behaviour like perspective so the oversizing is a result of that.
You need to manually scale down your skew-text and then disable the overflow of its container so you won't see any overlapping text.
That's the only idea for me to fix this.
It's hard to achieve the alignment if you use a rotation as transform.
Use a skew to get the inclined lines. You can (to some extent) get the angle on the letters using italics
Also, there is no need for all the vendor specific tranforms
.skew-parent-wrapper {
width: 300px;
margin-left: 100px;
margin-top: 50px;
border: 1px solid red;
padding-bottom: 30px;
}
.skew-text {
transform: skewY(-20deg);
font-style: italic;
background-color: goldenrod;
}
<div class="skew-parent-wrapper">
<h1 class="skew-text">Hello Welcome to the skewed text that can span several lines</h1>
</div>
Here is my Fiddle : http://jsfiddle.net/4wd6vmjL/
I want to mask a div to show my image skew . but i dont want image to skew.
now there is a gap in mask and image can't fill all mask .
.mask{
background-image: url('http://www.birds.com/wp-content/uploads/home/bird4.jpg');
height:200px;
-webkit-transform: skew(-16deg);
-moz-transform: skew(16deg);
-o-transform: skew(16deg);
transform: skew(16deg);
}
Any advice ? Thanks
You need to change your css of .mask class.
.wrapper{
display: block;
height:200px;
background: #f8f8f8 none repeat scroll 0 0;
text-align: left;
-webkit-transform: skew(-16deg);
-moz-transform: skew(-16deg);
-o-transform: skew(-16deg);
transform: skew(-16deg);
border-right:medium none;
margin-bottom: 26px;
margin-left: 44px;
overflow: hidden;
z-index: 100;
width:300px;
}
.mask {
background-image: url("http://www.birds.com/wp-content/uploads/home/bird4.jpg");
background-position: center top;
height: 480px;
transform: skew(16deg);
width: 430px;
padding-left: 70px;
}
<div class="wrapper">
<div class="mask">asdassadd</div>
</div>
Just add the image inside another div and counterskew it with the exact opposite. The hardest bit is positioning your div now, which would take some tweaking - depending on the angle your inside div needs to be bigger. I have also positioned it at the center of the wrapping div.
.mask {
position: relative;
left: 100px;
width: 200px;
height:200px;
overflow: hidden;
-webkit-transform: skew(-16deg);
-moz-transform: skew(-16deg);
-ms-transform: skew(-16deg);
transform: skew(-16deg);
}
.mask > * {
position: absolute;
left: 50%;
top: 50%;
width: 370px;
height:370px;
color: #fff;
background-image: url('http://www.birds.com/wp-content/uploads/home/bird4.jpg');
-webkit-transform: skew(16deg) translate(-50%,-50%);
-moz-transform: skew(16deg) translate(-50%,-50%);
-ms-transform: skew(16deg) translate(-50%,-50%);
transform: skew(16deg) translate(-50%,-50%);
}
<div class="mask"><div>This is just text to show your skew is now undone. This is just text to show your skew is now undone. This is just text to show your skew is now undone.This is just text to show your skew is now undone. This is just text to show your skew is now undone. This is just text to show your skew is now undone. This is just text to show your skew is now undone. This is just text to show your skew is now undone.This is just text to show your skew is now undone. This is just text to show your skew is now undone. This is just text to show your skew is now undone.</div></div>
I'm having a problem centering an image in css,
I have this:
<div class="workcontainer3">
<div class="wc3_inside"></div>
</div>
.workcontainer3 {
display:box;
width: 300px;
height: 300px;
margin-left:341px;
margin-top:277px;
background-color: #68477c;
-webkit-transform: rotateX(0deg) rotateY(50deg) rotateZ(-45deg);
transform: rotateX(0deg) rotateY(60deg) rotateZ(-45deg);
position:absolute;
overflow:hidden;
}
.wc3_inside{
-webkit-transform: rotateX(0deg) rotateY(0deg) rotateZ(45deg);
transform: rotateX(0deg) rotateY(0deg) rotateZ(45deg);
max-width: 500px;
max-height: 500px;
content:url(../testeimg.jpg) 50% 50%;
}
So basicaly I want to create a site, when i'll go to publish articles with images, and I want to get that image and independently of his size, i want that the image become centered in the" rhombus workcontainer3".
Like this:
So anyone knows what i'm doing wrong please?
I don't know your html, but you could try this, assuming your .wc3_inside is inside .workcontainer3.
.workcontainer3 {
display: table;
}
.wc3_inside {
display: table-cell;
text-align: center;
vertical-align: middle;
}
Working Fiddle