I'm having some problems rotating and positioning a line of text. Now it's just position that works. The rotation also works, but only if I disable the positioning.
CSS:
#rotatedtext {
transform-origin: left;
transform: rotate(90deg);
transform: translate(50%, 50%);
}
The html is just plain text.
The reason is because you are using the transform property twice. Due to CSS rules with the cascade, the last declaration wins if they have the same specificity. As both transform declarations are in the same rule set, this is the case.
What it is doing is this:
rotate the text 90 degrees. Ok.
translate 50% by 50%. Ok, this is same property as step one, so do this step and ignore step 1.
See http://jsfiddle.net/Lx76Y/ and open it in the debugger to see the first declaration overwritten
As the translate is overwriting the rotate, you have to combine them in the same declaration instead: http://jsfiddle.net/Lx76Y/1/
To do this you use a space separated list of transforms:
#rotatedtext {
transform-origin: left;
transform: translate(50%, 50%) rotate(90deg) ;
}
Remember that they are specified in a chain, so the translate is applied first, then the rotate after that.
Be careful on the "order of execution" in CSS3 chains! The order is right to left, not left to right.
transformation: translate(0,10%) rotate(25deg);
The rotate operation is done first, then the translate.
See:
CSS3 transform order matters: rightmost operation first
There is no need for that, as you can use css 'writing-mode' with values 'vertical-lr' or 'vertical-rl' as desired.
.item {
writing-mode: vertical-rl;
}
Something that may get missed: in my chaining project, it turns out a space separated list also needs a space separated semicolon at the end.
In other words, this doesn't work:
transform: translate(50%, 50%) rotate(90deg);
But this does:
transform: translate(50%, 50%) rotate(90deg) ; /*has a space before ";" */
Related
-webkit-transform: perspective(500) rotateY(13deg);
-webkit-transform-origin: 0% 45%;
DIV is left side position.
i just want to know how to place it right side(opposite)?
The code you provided will produce something that behaves like this JSFiddle.
Typically, the CSS3 transform property is used to rotate, scale, are move an element about a point. To move an element to the right of the page, like what I think you are describing, you should just simply float the element to the right or use the margin property instead.
div {
float: right;
}
This source discusses all the various CSS3 transform functions. The most common are:
translate(x,y)
scale(x,y)
rotate(angle)
skew(x-angle,y-angle)
These would not 'move' an element to the right side of the page like you are describing.
I am trying to get my div to rotate 360deg every time I click it, using CSS3 transform rotate. However, I'm also using the CSS3 transform translate to vertically align my div.
On the first click, it applies all the required CSS but doesn't actually rotate, however will rotate all clicks after that. It stays vertically aligned the whole time.
Unsure how to solve this and any help is appreciated :)
My css:
#my-div {
height: 300px;
width: 300px;
transition: all 0.5s ease-in-out;
display: block;
margin: auto;
/*to vertically align*/
position: relative;
top: 50%;
-webkit-transform: translateY(-50%);
transform: translateY(-50%);
}
My javascript
var angle = 360
$('#my-div').click(function() {
$(this).css({
'-webkit-transform' : 'translateY(-50%) rotate('+angle+'deg) ',
'transform' : 'translateY(-50%) rotate('+angle+'deg)'
})
angle += 360
});
In fact the transition works properly only when the 2 ends are explicitly set, here intially the rotate transform is not set explicitly, after the first click, it's explicitly set to rotate(360deg) and hence the next clicks work. To solve this, you just need to apply rotate(0deg) for your div initially via the CSS code:
#my-div {
/*...*/
-webkit-transform: translateY(-50%) rotate(0deg);
transform: translateY(-50%) rotate(0deg);
}
Note that I emphasized on the properly word, in fact if you set the initial angle to some angle equal or smaller than 180deg, you'll see it transitions OK. I doubt that if you don't set the initial rotate transform explicitly, the behavior is determined by the browser, that is 360deg won't make any transition, otherwise the rotating transition may be clockwise (if the angle % 360 is less than or equal to 180deg) and counter-clockwise if the angle % 360 is greater than 180deg (note about the modulo operation between angle and 360).
Demo.
I have a practical use for the CSS3 skewX property. I have written a simple image accordian-like script with jQuery. Images are skewed (already, not in CSS) as part of the design and in order to make the correct areas clickable, the containing divs need to be skewed.
The problem is that in skewing the div, the image is skewed aswell. Skewing a skewed image does not look good.
One solution I've tried is resetting the skewX value to 0deg on the image, but to no avail. In the fiddle, I haven't included the accordian as this isn't necessary to the solution.
http://jsfiddle.net/yM49N/2/
<div><img src="https://www.google.com/intl/en_com/images/srpr/logo3w.png"></div>
div {
-webkit-transform:skewX(200deg);
-moz-transform:skewX(200deg);
-o-transform:skewX(200deg);
-ms-transform:skewX(200deg);
transform:skewX(200deg);
border:1px solid red;
}
You can apply an inverted skewX on img:
img {
-webkit-transform: skewX(-200deg);
-moz-transform: skewX(-200deg);
-o-transform: skewX(-200deg);
-ms-transform: skewX(-200deg);
transform: skewX(-200deg);
}
To make the div contain the image properly, you also need to add overflow: hidden.
http://jsfiddle.net/thirtydot/yM49N/3/
Is it possible to specify an origin at the top left (0%, 0%) for scaling, and a different origin (center) for rotation in CSS3? I am only working with webkit, if that helps.
I am currently using a transform list (i.e. -webkit-transform: scale(newScale) rotate(newRotate)
but it seems like it isn't possible to change the origin in-between passes. Is there a better way to look at this? Presently, if I scale an object and rotate it with an origin at the default center, the position of the element is now off and so when you drag the element, the cursor is still at the top left of the element, whereas it should be at the center. Changing the origin to the center to scale it fixes this, but presents new problems with rotation and flipping.
Found a good solution to the problem... by creating a parent/child relationship as follows:
<div class="container">
<img src="" />
</div>
I can now setup two classes as follows:
.container {
-webkit-transform-origin: 0% 0%;
-webkit-transform: scale(0.5);
}
.container img {
-webkit-transform-origin: 50% 50%;
-webkit-transform: rotate(45deg);
}
This will do exactly what I want: scale with an origin at the top left, then rotate with the origin at the center. Voila!
Instead think of the scaling with origin (0,0) as a scaling+translation with origin center. In isolation the following:
-webkit-transform-origin: top left;
-webkit-transform: scale(1.5);
is the same as:
-webkit-transform-origin: center;
-webkit-transform: scale(1.5) translate3d(16.66%, 16.66%, 0);
In theory the rotation origin center should leave the corners sticking out by sqrt(1/2)-0.5 requiring us to move the origin down and right by 20.71%, but for some reason the webkit transform algorithm moves things down for us (but not quite enough) and scales the origin for us (again not quite). Thus we need to move right by 50% and make some adjustments for this odd behavior:
-webkit-transform-origin: center;
-webkit-transform: scale(1.5) rotate(45deg) translate3d(52.5%, 0.5%, 0);
-webkit-transition: all 2s ease-in;
Note: my original answer was using a div with width:100px; and height100px; which requires a translate3d(54px, 0, 0).
What about that: http://jsfiddle.net/22Byh/1/
I would like to have a div with some text in it. But I'd like the text to flow vertically instead of horizontally. Like this;
M
y
t
e
x
t
Any ideas on how to accomplish this with CSS?
If you have only one line of text you could try using width:1em;letter-spacing:1px (and a space between each letter)
edit: if you want to use no space between each letter width:1em;letter-spacing:1em;word-wrap:break-word
CSS3 has a proposed 'writing-mode' attribute that can be set to 'tb-lr' (write text from top to bottom, write lines from left to right), but I don't know if any browsers support it yet, so its not something to rely on.
div{
text-orientation: upright;
writing-mode: vertical-lr;
}
<div>Jelly</div>
Please find the answer here you can use text-orientation and
.yourtext { -moz-transform: rotate(-90deg);
-webkit-transform: rotate(-90deg);
-moz-transform-origin: top right;
-webkit-transform-origin: top right;
filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=3);
}