It is easy to set text from top to bottom and there are enough resources to do that.
The problem is with bottom to top vertical alignment.
See the image below-
You might want to try this.
.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);
}
This should work:
<head>
<style>
div
{
width:130px;
height:50px;
-ms-transform:rotate(270deg); /* IE 9 */
-moz-transform:rotate(270deg); /* Firefox */
-webkit-transform:rotate(270deg); /* Safari and Chrome */
-o-transform:rotate(270deg); /* Opera */
}
</style>
</head>
<body>
<br><br><br>
<div><h3>Vertical Text</h3></div>
</body>
div {
top:90px;
position:relative;
width:50px;
white-space:nowrap;
-ms-transform:rotate(270deg);
-moz-transform:rotate(270deg);
-webkit-transform:rotate(270deg);
-o-transform:rotate(270deg);
}
Worked well for me.
Related
I'm just free styling right now. I downloaded a free HTML editor and just playing around. What I'm really trying to do is add a picture and rotate it to the right by 30 degrees, add a round corner by 45px, and blue shadow by 20px.
This is what I have so far, again I'm just free styling. I'm not sure if I'm doing this right. This is my first time playing with HTML...
Author: ...
Date: 04/15/2014
Filename: t78.htm
Supporting files: torte.jpg
-->
<TITLE> ...???... </TITLE>
<META NAME="Generator" CONTENT="EditPlus">
<META NAME="Author" CONTENT="">
<META NAME="Keywords" CONTENT="">
<META NAME="Description" CONTENT="">
<img src="torte.jpg" data-rotate="90">
<img src="torte.jpg" data-rotate="45">
<img src="torte.jpg">
Check this out jsfiddle. hope this helps.
add this to your CSS for image rotation
/* Firefox */
-moz-transform:rotate(90deg);
/* Safari and Chrome */
-webkit-transform:rotate(90deg);
/* Opera */
-o-transform:rotate(90deg);
/* IE9 */
-ms-transform:rotate(90deg);
and this to your CSS for radius and shadow
border-radius:45px;
box-shadow: 0 0 20px rgba(0, 0, 0, 0.3);
see to rotate either u can use jquery or CSS..
lets see how to do it with CSS
check the link
--CSS--
img
{
display:block;
margin:100px;
/*set the radius as u want*/
border-radius:45px;
/*set the shadow u want*/
box-shadow:10px 10px 20px blue;
}
-- declare a css class to rotate 30 degree clockwise..
.clock30
{
-webkit-transform: rotate(30deg);
-moz-transform: rotate(30deg);
-o-transform: rotate(30deg);
-ms-transform: rotate(30deg);
transform: rotate(30deg);
}
check the link you will know how to use it
http://jsfiddle.net/g7FtY/2/
hello you can use CSS to achieve the rotate style.
<img class="rotate" img src="torte.jpg" />
<style>
.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);
}
</style>
I want to have the bottom curved in my Header Div. Basically the div should be slanted, i tried the below, and its working in all latest browser's except ie8 & below
<div class="HeaderTitle" style="background: #000;">
<h1 class="header">
PROMOTIONS</h1>
</div>
#Container #InnerPages .HeaderTitle
{
padding: 115px 0 0 0; background-color: #000;
margin-right: -20px;
-webkit-transform: rotate(5deg); /* Safari and Chrome */
-moz-transform: rotate(5deg); /* Firefox */
-o-transform: rotate(5deg); /* Opera */
-ms-transform: rotate(5deg); /* IE 9 */
transform: rotate(5deg);
}
#Container #InnerPages .header
{
text-align: center; color: #fff; font-size: 30px; margin: 0; padding: 0 0 26px;
-webkit-transform: rotate(-5deg); /* Safari and Chrome */
-moz-transform: rotate(-5deg); /* Firefox */
-o-transform: rotate(-5deg); /* Opera */
-ms-transform: rotate(-5deg); /* IE 9 */
transform: rotate(-5deg);
}
But this doesnt work in IE & my client is very adamant that it should work in IE 8 :-(
Any help please...
Solution 1
Use IETransformsTranslator
It's an on-line tool With this tool you can make matrix filter transforms what works on IE6,IE7 & IE8. Just paste you CSS3 transform functions (e.g. rotate(15deg) ) and it will do the rest.
Solution 2
filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=3);
The rotation property of the BasicImage filter can accept one of four values: 0, 1, 2, or 3 which will rotate the element 0, 90, 180 or 270 degress respectively.
Solution 3
Since this answser is still getting up-votes, I feel I should update it with information about a javacript library called CSS Sandpaper that allows you to use (near) standard CSS code for rotations even in older IE versions.
Once you've added CSS Sandpaper to your site, you should then be able to write the following CSS code for IE6-8:
-sand-transform: rotate(25deg);
Hope this helps you :)
Basically you want curves for IE8
This will help
.div
{
-webkit-border-radius:4px; /* older webkit based browsers */
-khtml-border-radius:4px; /* older khtml based browsers */
-moz-border-radius:4px; /* older firefox */
border-radius:4px; /* standard */
behavior: url(border-radius.htc); /* IE 6-8 */
}
I have Pie chart drawn using CSS. when current image is not starting from 0 degree..
Actual Out & Expected Output : Green should be 140 deg ; red : 60 deg ; orange: 160 deg
CSS :
<style>
/*
make each pie piece a rectangle twice as high as it is wide.
move the transform origin to the middle of the left side.
Also ensure that overflow is set to hidden.
*/
.pie {
position:absolute;
width:100px;
height:200px;
overflow:hidden;
left:110px;
-moz-transform-origin:left center;
-ms-transform-origin:left center;
-o-transform-origin:left center;
-webkit-transform-origin:left center;
transform-origin:left center;
}
/*
unless the piece represents more than 50% of the whole chart.
then make it a square, and ensure the transform origin is
back in the center.
NOTE: since this is only ever a single piece, you could
move this to a piece specific rule and remove the extra class
*/
.pie.big {
width:200px;
height:200px;
left:10px;
-moz-transform-origin:center center;
-ms-transform-origin:center center;
-o-transform-origin:center center;
-webkit-transform-origin:center center;
transform-origin:center center;
}
/*
this is the actual visible part of the pie.
Give it the same dimensions as the regular piece.
Use border radius make it a half circle.
move transform origin to the middle of the right side.
Push it out to the left of the containing box.
*/
.pie:BEFORE {
content:"";
position:absolute;
width:100px;
height:200px;
left:-100px;
border-radius:100px 0 0 100px;
-moz-transform-origin:right center;
-ms-transform-origin:right center;
-o-transform-origin:right center;
-webkit-transform-origin:right center;
transform-origin:right center;
}
/* if it's part of a big piece, bring it back into the square */
.pie.big:BEFORE {
left:0px;
}
/*
big pieces will also need a second semicircle, pointed in the
opposite direction to hide the first part behind.
*/
.pie.big:AFTER {
content:"";
position:absolute;
width:100px;
height:200px;
left:100px;
border-radius:0 100px 100px 0;
}
/*
add colour to each piece.
*/
.pie:nth-of-type(1):AFTER,
.pie:nth-of-type(1):BEFORE {
background-color:green;
}
.pie:nth-of-type(2):AFTER,
.pie:nth-of-type(2):BEFORE {
background-color:red;
}
.pie:nth-of-type(3):AFTER,
.pie:nth-of-type(3):BEFORE {
background-color:orange;
}
/*
now rotate each piece based on their cumulative starting
position
*/
.pie[data-start="140"] {
-moz-transform: rotate(140deg); /* Firefox */
-ms-transform: rotate(140deg); /* IE */
-webkit-transform: rotate(140deg); /* Safari and Chrome */
-o-transform: rotate(140deg); /* Opera */
transform:rotate(140deg);
}
.pie[data-start="200"] {
-moz-transform: rotate(200deg); /* Firefox */
-ms-transform: rotate(200deg); /* IE */
-webkit-transform: rotate(200deg); /* Safari and Chrome */
-o-transform: rotate(200deg); /* Opera */
transform:rotate(200deg);
}
/*
and rotate the amount of the pie that's showing.
NOTE: add an extra degree to all but the final piece,
to fill in unsightly gaps.
*/
.pie[data-value="140"]:BEFORE {
-moz-transform: rotate(140deg); /* Firefox */
-ms-transform: rotate(140deg); /* IE */
-webkit-transform: rotate(140deg); /* Safari and Chrome */
-o-transform: rotate(140deg); /* Opera */
transform:rotate(140deg);
}
.pie[data-value="60"]:BEFORE {
-moz-transform: rotate(60deg); /* Firefox */
-ms-transform: rotate(60deg); /* IE */
-webkit-transform: rotate(60deg); /* Safari and Chrome */
-o-transform: rotate(60deg); /* Opera */
transform:rotate(60deg);
}
.pie[data-value="160"]:BEFORE {
-moz-transform: rotate(160deg); /* Firefox */
-ms-transform: rotate(160deg); /* IE */
-webkit-transform: rotate(160deg); /* Safari and Chrome */
-o-transform: rotate(160deg); /* Opera */
transform:rotate(160deg);
}
/*
NOTE: you could also apply custom classes (i.e. .s0 .v30)
but if the CSS3 attr() function proposal ever gets implemented,
then all the above custom piece rules could be replaced with
the following:
.pie[data-start] {
transform:rotate(attr(data-start,deg,0);
}
.pie[data-value]:BEFORE {
transform:rotate(attr(data-value,deg,0);
}
*/
</style>
HTML :
<!--
for each piece of the pie chart create one div and give it
a data-value attribute that represents the amount (in degrees) that
represents its total visible portion, and a data-start attribute
that matches the amount rotation for the starting (the cumulative value amount of all the previous pieces).
-->
<div class="pie" data-start="0" data-value="140"></div>
<div class="pie" data-start="140" data-value="60"></div>
<div class="pie big" data-start="200" data-value="160"></div>
use
.pie[data-start="200"] {
-moz-transform: rotate(180deg);
-ms-transform: rotate(180deg);
-webkit-transform: rotate(180deg);
-o-transform: rotate(180deg);
transform: rotate(180deg);
}
Fiddle
I have written below code. But now the requirement is that the image should be rotated 180 degrees. How can I achieve this?
#cell {
background-image: url("../images/logo.PNG");
background-attachment: fixed;
background-repeat: no-repeat;
background-position: 0px 250px;
background-color: #FFFFFF;
border-left: 2px;
}
HTML tag:
<td width="2%" id="cell"/>
One cross-browser solution is
#cell {
-webkit-transform: rotate(180deg); /* Chrome and other webkit browsers */
-moz-transform: rotate(180deg); /* FF */
-o-transform: rotate(180deg); /* Opera */
-ms-transform: rotate(180deg); /* IE9 */
transform: rotate(180deg); /* W3C compliant browsers */
/* IE8 and below */
filter: progid:DXImageTransform.Microsoft.Matrix(M11=-1, M12=0, M21=0, M22=-1, DX=0, DY=0, SizingMethod='auto expand');
}
Note, that for IE8 and below, the rotation center point is not located in the center of the image (as it happens with all other browsers). So, for IE8 and below, you need to play with negative margins (or paddings) to shift the image up and left.
The element needs to be blocked. Other units that can be used are:
180deg = .5turn = 3.14159rad = 200grad
If you don't have any text in the <td> you can use transform: rotate(180deg); on it. If you do have text, this will rotate the text too. To prevent that you can put a <div> inside the <td>, put the text inside that, and rotate that 180 degrees (which puts it upright again).
Demo: http://jsfiddle.net/ThinkingStiff/jBHRH/
HTML:
<table>
<tr><td width="20%" id="cell"><div>right-side up<div></td></tr>
</table>
CSS:
#cell {
background-image: url(http://thinkingstiff.com/images/matt.jpg);
background-repeat: no-repeat;
background-size: contain;
color: white;
height: 150px;
transform: rotate(180deg);
width: 100px;
}
#cell div {
transform: rotate(180deg);
}
Output:
You can also try this axial type rotation OR rotation on Z-axis.
.box {
background: url('http://aashish.coolpage.biz/img/about/7.jpg');
width: 200px;
height: 200px;
transition: transform .5s linear;
transform-style: preserve-3D;
}
.box:hover {
transform: rotateY(180deg);
}
<div class="box"></div>
You can use CSS3 for this, but there are some browser issues:
transform: rotate(180deg);
Also look here: CSS3 rotate alternative?
image a complete black web page. On this web page is a 100% size white div that fills the whole page. I'd like to rotate this div by -7 degrees (or 7 degrees counter-clock wise).
This will result in the black background being visible in triangles on the edges, just like you had placed a piece of paper on a desk and turned it a bit to the left.
Actually this can be done with some css and it's working quite well (except for IE).
The real problem now is:
I'd like to have a normal, non-rotated div element on top of that to display the content in, so that only the background is rotated.
Rotating a contained div counterwise doesn't work though, because through the two transformations the text will be blurry in all browsers.
How can I realize that?
Best would be a solution workiing in current Webkit browsers, FF3.5+ and IE7+. If only IE8+ I could live with that too.
Try using
#content {
position: absolute;
z-index: 500;
margin-left: auto;
margin-right: auto;
}
#background {
//Your white DIV
}
<div id="background"></div>
<div id="content">
Lorem ipsum
</div>
Use position:absolute; on the background and z-index it to the back.
Here is an example.
You have to rotate it back... http://jsfiddle.net/gFCHE/
Not blurry at all on Chrome or ChromeOS. It shouldn't be anywhere else either.
Add overflow:hidden to #crooked for a cool effect with images.
This CSS will work to get you started but you'll need to tweak it to work as you want it.
<div id='wrap'>
<div id='cooked'>
<div id='straight'>
</div>
</div>
</div>
#wrap{
background:#000;
height:100%;
}
#crooked{
height:100%;
color:#f00;
-moz-transform: rotate(-7.0deg); /* FF3.5+ */
-o-transform: rotate(-7.0deg); /* Opera 10.5 */
-webkit-transform: rotate(-7.0deg); /* Saf3.1+, Chrome */
-ms-transform: rotate(-7.0deg); /* IE9 */
transform: rotate(-7.0deg);
filter: progid:DXImageTransform.Microsoft.Matrix(/* IE6–IE9 */
M11=0.992546151641322, M12=0.12186934340514748, M21=-0.12186934340514748, M22=0.992546151641322, sizingMethod='auto expand');
zoom: 1;
}
wrap{
background:#000;
height:100%;
}
#crooked{
height:100%;
background:#fff;
-moz-transform: rotate(-7.0deg); /* FF3.5+ */
-o-transform: rotate(-7.0deg); /* Opera 10.5 */
-webkit-transform: rotate(-7.0deg); /* Saf3.1+, Chrome */
-ms-transform: rotate(-7.0deg); /* IE9 */
transform: rotate(-7.0deg);
filter: progid:DXImageTransform.Microsoft.Matrix(/* IE6–IE9 */
M11=0.992546151641322, M12=0.12186934340514748, M21=-0.12186934340514748, M22=0.992546151641322, sizingMethod='auto expand');
zoom: 1;
}
#straight{
-moz-transform: rotate(7.0deg); /* FF3.5+ */
-o-transform: rotate(7.0deg); /* Opera 10.5 */
-webkit-transform: rotate(7.0deg); /* Saf3.1+, Chrome */
-ms-transform: rotate(7.0deg); /* IE9 */
transform: rotate(7.0deg);
filter: progid:DXImageTransform.Microsoft.Matrix(/* IE6–IE9 */
M11=0.992546151641322, M12=-0.12186934340514748, M21=0.12186934340514748, M22=0.992546151641322, sizingMethod='auto expand');
zoom: 1;