I am using transform property of CSS3. It creates space on the left side of the div after it rotates it. Heres my JSfiddle
SO want some code:
<div>
Maglevboard
</div>
<style>
div {
font-size:5em;
transform:rotate(-90deg);
display:inline-block;
}
</style>
You can fix it by adding a translation and using a proper transform-origin. I think you want
div {
font-size: 5em;
transform-origin: 100% 0;
transform: translateX(-100%) rotate(-90deg);
display: inline-block;
}
<div>Maglevboard</div>
Related
I am trying to accomplish the following with CSS:
I have a code pen started here
I can easily rotate the text as I would like with the following CSS:
.Rotate {
/* Safari */
-webkit-transform: rotate(-90deg);
/* Firefox */
-moz-transform: rotate(-90deg);
/* IE */
-ms-transform: rotate(-90deg);
/* Opera */
-o-transform: rotate(-90deg);
/* Internet Explorer */
filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=3);
}
However, the text ends up as shown below
I understand why it's happening, but unsure how to globally solve it. It is using the bottom left corner before you rotate it. I can individually with each widget place a fixed height/width on the .title But if at all possible. I would like to avoid that.
Can anyone provide a solution that would allow the 'rotated' text to always be located at bottom:0, left:0?
You can set the origin to bottom left, and then apply a translation to the element, prior to the rotation
-webkit-transform: rotate(-90deg) translateY(100%);
-webkit-transform-origin: bottom left;
transform: rotate(-90deg) translateY(100%);
transform-origin: bottom left;
The translation makes the top left corner be where you want it, so to speak.
It's not easy to explain how it works... just try it
I personally would just make the elements a little more intricate but singular with :before & :after. Then I'd position the text within a position absolute.
.widget {
height: 50px;
width: 250px;
background: #81a6d5;
float: left;
margin-left: 10px;
color: #084ca1;
}
.widget::before {
content: "";
position: absolute;
height: 50px;
width: 35px;
background: rgba(255,255,255,.3);
}
.widget .title {
transform: rotate(-90deg);
position: absolute;
font-size: 11px;
font-family: helvetica;
margin-top: 15px;
}
I made this pen to show the idea, it would clean up the coding a little bit also.
http://codepen.io/brycesnyder/pen/PwYdJq
I wasn't able to think of a way to universally be able to do this with CSS without positioning each one individually, but with JS it was pretty easy. If you can use JS intead, this code should take care of it on its own, without changing any of your current HTML or CSS.
$(function(){
$('.rotate').each(function(){
var thisTitle = $(this);
var w = thisTitle.outerWidth();
var h = thisTitle.outerHeight();
var newLeft = Math.abs((w - h) / 2) * -1;
var newBottom = Math.abs((w - h) / 2);
thisTitle.css('left', newLeft);
thisTitle.css('bottom', newBottom);
});
});
Codepen: http://codepen.io/supah_frank/pen/yyBxzo
I want to code the below design in HTML&CSS
What I made so far is:
I made it using:
a links
SVG as background
Absolute position and translate(x,y) property in CSS.
Please check this fiddle for the live link
The issues in my design are:
Each item is actually a rectangle, if you notice the highlighted
rectangle in red, this is the area of the selection, so if you hover
over the left corner of m2, it will select m3.
I want to change
the background color of the SVG background when hover, how to
achieve that?
Is there an ideal way to make this concept better?
even if we used JS to position the elements.
Click here to view the SVG shape itself.
CSS code for the items:
.menu #m1 {
right: 100px;
transform: translate(-140px, -160px);
}
.menu #m2 {
right: 295px;
transform: translate(-25px, -80px);
}
.menu #m3 {
right: 400px;
}
.menu #m4 {
right: -60px;
transform: translate(-140px, -160px);
}
.menu #m5 {
right: 140px;
transform: translate(-20px, -80px);
}
.menu #m6 {
right: 240px;
}
.menu #m7 {
right: -95px;
transform: translate(-15px, -160px);
}
.menu #m8 {
right: 0px;
transform: translate(0, -80px);
}
Thanks,
This is how I would do it to keep the boundaries of the shapes based on Responsive grid of diamonds (no JS or svg needed):
DEMO
.wrap{
width:50%;
margin-left:13%;
transform-origin:60% 0;
transform: rotate(-45deg);
}
.wrap > a{
float:left;
width:19%;
padding-bottom:19%;
margin:0.5%;
background:teal;
}
.wrap > a:hover{
background:gold;
}
.wrap > a:nth-child(4){
clear:left;
margin-left:20.5%;
}
.wrap > a:nth-child(7){
clear:left;
margin-left:60.5%;
}
<div class="wrap">
</div>
To insert content in the shapes, you can "unrotate" it with transform: rotate(45deg)
You need to rotate the links themselves. Right now, you're not rotating anything, you're just showing images with rotated boxes. Instead, make the background image unrotated and rotate them with CSS.
For example:
-ms-transform: rotate(7deg); /* IE 9 */
-webkit-transform: rotate(7deg); /* Chrome, Safari, Opera */
transform: rotate(7deg);
A direct answer would be to use the poly attribute of SVG
That was you are not relying on CSS to rotate it.
The svg element once drawn is not manipulated after the css changes the appearance.
Drawing a 'diamond' shape in poly is your best option to avoid the bounding rectangle..
<svg height="250" width="500">
<polygon points="0,25, 25,0, 50,25, 25,50 " style="fill:black" />
</svg>
Basic example
JsFiddle
Update :
The code you have produced is shows it is not the SVG background you are editing..
If you want the SVG background to change you can add the attribute as i have lined up, not edited in CSS.
For my option to work on a hover event for example, you will need an id on each of the svg elements and then :hover on each of those, or javascript.. but its just an option. Other answers look to be more applicable.
My answer only facilitates the drawing onto the SVG.
Did you try css rotate to restrict the rectangle. You could use SVG anyway as the background now.
.m-item {
color: white;
text-decoration: none;
text-transform: uppercase;
border: 2px solid #000;
background-color: black;
padding: 50px;
position: absolute;
transform: rotate(45deg) translate(25px);
}
.m-item span {
position: absolute;
transform: rotate(-45deg) translate(0, -14px);
}
.m-item:hover {
background-color: #AA5;
}
<span>m1</span>
I have a two div's and one anchor tag. Now the first div, I want to transform skew it only the right side of the div and the second div, I want to transform skew it only on the left side. The anchor tag, I want it to transform skew both left and right side (please refer to the image attach).
my html codes are:
<div class="box box1"></div>
<div class="box box2"></div>
<a class="theanchor" href="index.html" target="_blank">Home</a>
and my css codes are:
.box{
width: 900px;
height: 300px;
background: red;
}
.theanchor{
display: block;
padding: 8px 13px;
background: blue;
text-decoration: none;
}
and what i tried so far and my first source to figure things out is:
transform:skewX(10deg));
but nothing works, if anyone here could point me how to do it or how to make it, it would be greatly appreciated. Thank you in advance.
I think I've found a way around this, by skewing a container div, then creating a content div which unskews the content should give you the 3rd shape.
To create right angled versions, I gave the content div a background colour and offset it with position:relative and then left/right (depending on what side you want your right angle)
Example here:
https://codepen.io/zarocreative/pen/Jjopdmr
div.skewed-heading-container {
color: #FFF;
background-color:#0096aa;
display:inline-block;
margin:20px;
padding:0 20px;
-ms-transform: skew(-20deg,0);
-webkit-transform: skew(-20deg,0);
transform: skew(-20deg,0);
}
div.skewed-heading-content {
-ms-transform: skew(20deg);
-webkit-transform: skew(20deg);
transform: skew(20deg);
position:relative;
right:-50px;
background-color:#0096aa;
padding:5px 30px;
}
I have block that has transparent background, but to prevent from transparent text I position block absolutely and put it behind content block. But now i need change background on hover (all block including children). Is it possible to achieve this using only css? Also I need it to work on IE 7..
Here is example how it works.
CSS
.block
{
position:relative; float:left;
}
span
{
position:relative; float:left;
z-index: 5;
background-color: red;
margin: 5px
}
.bg
{
background-color: blue;
position:absolute;
left: 0; top: 0;
width: 100%; height: 100%;
opacity: 0.5;
}
.bg:hover
{
opacity: 1.0;
}
HTML
<div class="block">
<span>this</span>
<span>is</span>
<span>some</span>
<span>content</span>
<div class="bg">
</div>
</div
http://jsfiddle.net/insanebits/wHBXn/4/
EDIT:
Question : Is it possible to achieve background color change on hover over abosolutely positioned background ?
In your example hover will not work when you are hovering mouse on text. You need to change background opacity when hovering on block. Here is example:
.block:hover .bg{
opacity: 1.0;
}
you might remove the empty div and create a 24-bit png file with blue background and 50% opacity to put as background-image of your .block element
Then, just change the background with .block:hover { ... }
.bg:hover
{
opacity:0.4;
filter:alpha(opacity=40);
}
use that option in .bg:hover..Its working in all IE browser.
I have the following HTML:
<div class="outer">
<div class="inner rotate">Centered?</div>
</div>
div.outer is a narrow vertical strip. div.inner is rotated 90 degrees. I would like the text "Centered?" to appear centered in its container div. I do not know the size of either div in advance.
This comes close: http://jsfiddle.net/CCMyf/2/. You can see from the jsfiddle that the text is vertically centered before the transform: rotate(-90deg) style is applied, but is somewhat offset after. This is particularly noticeable when div.outer is short.
Is it possible to center this text vertically without knowing any of the sizes in advance? I haven't found any values of transform-origin that solve this problem.
The key is to set position top and left to 50% and then transformX and transformY to -50%.
.inner {
position: absolute;
top: 50%;
left: 50%;
}
.rotate {
transform: translateX(-50%) translateY(-50%) rotate(-90deg);
}
see: http://jsfiddle.net/CCMyf/79/
It may be a bit late for answering that question, but I stumbled on the same issue and found some way of achieving it, by adding another div in the way.
<div class="outer">
<div class='middle'><span class="inner rotate">Centered?</span></div>
</div>
and applying a text-align: center on that middle element, along with some positioning stuff:
.middle {
margin-left: -200px;
width: 400px;
text-align: center;
position: relative;
left: 7px;
top: 50%;
line-height: 37px;
}
The .inner also gets a display: inline-block; to enable both rotate and text-align properties.
Here is the corresponding fiddle : http://jsfiddle.net/CCMyf/47/
The another option to rotate text 90 degree and center on axis Y is:
.rotate-centered {
top: 50%;
right: 50%;
position: absolute;
transform: scale(-1) translate(-50%, 50%);
writing-mode: vertical-lr;
}
<span class="rotate-centered">Text<span>
Example: https://codepen.io/wwwebman/pen/KKwqErL
But because of bad support in IE/EDGE writing-mode does NOT work there:
https://developer.mozilla.org/en-US/docs/Web/CSS/writing-mode
Can you add margin: 0 auto; to your "rotate" class to center the text.
.rotate {
-webkit-transform: rotate(-90deg);
-ff-transform: rotate(-90deg);
transform: rotate(-90deg);
width: 16px; /* transform: rotate() does not rotate the bounding box. */
margin: 0 auto;
}
The answer from 'bjnsn' is good but not perfect as it fails when the text contains space in it. For example he used 'Centered?' as text but if we changed the text to let suppose 'Centered? or not' then it will not work fine and will take the next line after space. Ther is not width or height defined for the inner div block.
.inner {
font-size: 13px;
font-color: #878787;
position: absolute;
top: 50%;
left: 50%;
background: #DDD;
}
https://jsfiddle.net/touqeer_shakeel/f1gfy1yy/
But we can make the whole text centered align properly, by setting the inner div width equal to height of the outer div, line-height of inner div equal to the width of the outer div and setting the display flex property for inner div with align-items:center and justify-content:center properties.
.inner {
font-size: 13px;
font-color: #878787;
position: absolute;
top: 50%;
left: 50%;
display: flex;
justify-content:center;
align-items:center;
line-height:40px;
}
$('#height').on('change', function(e) {
$('.outer').css('height', $('#height').val() + 'px');
$('.inner').css('width', $('#height').val() + 'px');
});
updated fiddle https://jsfiddle.net/touqeer_shakeel/cjL21of5/
Removing : margin-top: -7px; from .inner made the vertically rotated text centered for me. It also made the horizontal text not centered.
Just remove the above code?
You could add this:
$('.inner').css('margin-top', $(this).parent().height() - 2*$(this).height());
To your .on('change') function, as you can see here: http://jsfiddle.net/darkajax/hVhbp/