I want to "wrap" the text like you wrap text around an image but is it possible to do this without an image?
The text on the right is the result I want.
You can use CSS3 transforms.
jsFiddle example
div {
position:relative;
width:300px;
left: 40px;
transform: skew(-20deg);
-ms-transform: skew(-20deg); /* IE 9 */
-moz-transform: skew(-20deg); /* Firefox */
-webkit-transform: skew(-20deg); /* Safari and Chrome */
-o-transform: skew(-20deg); /* Opera */
}
It is possible but it can't be done with nice markup.
Have a look at http://www.torylawson.com/index.php?title=CSS_-_Wrapping_text_around_non-rectangular_shapes
http://www.csstextwrap.com/ - is an online tool that may help if you want a 'copy and paste' approach.
http://www.jwf.us/projects/jQSlickWrap - is a jquery plugin for non-ie browsers if IE support is not a requirement.
In modern browsers, you can use transforms but this skews the content (letters) as well.
Example:
http://jsfiddle.net/willemvb/LftMA/
I manage to write my own little script. The idea came from jQSlickWrap with an element for each row.
Here it is: http://jsfiddle.net/m4jLt/1/
It's not perfect yet but with some tweaking I think it will work just fine.
There is three versions in that fiddle. (just so you know)
If you make it better, please do share :)
Related
I know it works because I have used it in the past, however this time around it is giving me a hard time and I ma not sure what I am doing wrong.
<Icon type={sensorKey} style={sensorKey==='car'?[{...activityStyles.icon}, {transform: [{ rotateY: '180deg'}]}]:activityStyles.icon} size={Typography.bodyLineHeight} />
Just set: transform: rotateY(180deg).
We need you to provide an example of your html and css in order to give you the help you are asking for. Without it all we can do it guess.
But I will take a stab at it (note I added more for cross browser functionality):
-ms-transform: rotateY(180deg); /* IE 9 */
-webkit-transform: rotateY(180deg); /* Safari 3-8 */
transform: rotate(180deg);
I have implemented a "push-in menu" mobile menu to a very basic site structure.
The menu is based on http://callmenick.com/post/slide-and-push-menus-with-css3-transitions
For some odd reason, when I click on the "Push right" button the menu has a large margin to the right. I am not sure why this is happening or how to fix it. It works fine in IE11 but not in Chrome v52.
An example of the problem can be found here: http://seyoum.net/playground/1/
I have tried to use the DevTools to pinpoint any CSS or markup that may cause the problem without any luck.
What is causing this and how can I fix it?
This is what it should look like and what it looks like in IE 11:
And this is the problem and what it looks like in Chrome:
You've set your main wrapper to move -300px in the CSS, but you only want your menu to move. Remove this...
.overlay-wrapper.has-push-right {
-webkit-transform: translateX(-100%);
-ms-transform: translateX(-100%);
transform: translateX(-100%);
}
#media all and (min-width:320px) {
.overlay-wrapper.has-push-right {
-webkit-transform: translateX(-300px);
-ms-transform: translateX(-300px);
transform: translateX(-300px);
}
}
A jsFiddle (free tool) would be nice next time, I used your link to make one here. It does make it very much easier to answer questions. People who click on the question can look, solve, and test the solution quickly to make sure they really made a valid correction.
Turns out, I forgot a closing tag for the #page. I am so embarrassed. I shall check my markup thoroughly next time.
The reason for the blank space is that you have the following CSS rules (prefixed variants omitted for brevity):
.overlay-wrapper.has-push-right
{
transform: translateX(-300px);
}
.push-menu--push-right.is-active
{
transform: translateX(0);
}
.push-menu--push-right
{
transform: translateX(300px);
position: absolute;
width: 300px;
right: 0;
}
The last set of rules places the menu "to the right" of the container. The second rule resets the translate, and puts it back inside the container. The first one moves the whole thing to the left.
Remove the second one and you should be all set.
Why does this work in Firefox, but not in Chrome:
position:absolute;
overflow: hidden;
margin:0;
padding:0;
transform: translate(240px,79.5px) scale(1.2484375);
In translate(x,y) and scale(value), x,y, and value are different for different computers/browsers.
it works for Firefox, but Chrome, does not get scaled or translated.
demo:
**
http://jsfiddle.net/SergioAntonio/kp9yr4m1/
**
its seems like I found a solution:
I changed the JavaScript code from:
document.body.style="transform: translate(240px,79.5px) scale(1.2484375)";
to
document.body.style.transform="translate(240px,79.5px) scale(1.2484375)";
and now it works in chrome.
Have you tried vendor-prefixing it properly?
-webkit-transform: translate(240px,79.5px) scale(1.2484375);
Chrome started natively offering support for transform only in Version 36. For older versions, also for most Android browsers, you will still have to prefix it.
Use like this
.example {
-webkit-transform: translate(240px,79.5px) scale(1.2484375);
-ms-transform: translate(240px,79.5px) scale(1.2484375);
transform: translate(240px,79.5px) scale(1.2484375);
}
I've got a simple text inside a div, something like the following;
<div id="banner">
<div>This is an example text</div>
</div>
I want the text inside the div to be rotated 20-30 degrees. I've already found this topic on stackoverflow about it and it gives me the desired result in Firefox and Chrome but not in IE7, IE8 and IE9. I also tried jquery rotate, but when using this it looks like the plugin is doing something with the div itself, making it disappear, instead of rotating the text inside the div. Is this even possible with javscript and/or css?
NOTE: Cufon is also being used.
Update after Codlers answer:
This is the current applied css after the answer of Codler. Works in FF and Chrome.
-ms-transform: rotate(-20deg);
-moz-transform: rotate(-20deg);
/*-moz-rotation-point: 0 0;*/
-webkit-transform: rotate(-20deg);
/*-webkit-rotation-point: 0 0;*/
-o-transform: rotate(-20deg);
/*-ms-writing-mode: tb-lr;
* html writing-mode: tb-lr;*/
UPDATE 2:
IE7 and IE8 are rotating the text now, but in IE9 i'm getting a big black square behind my rotated text. What can be causing this? CSS is now as below;
-moz-transform: rotate(-20deg);
-o-transform: rotate(-20deg);
-webkit-transform: rotate(-20deg);
-ms-transform: rotate(-20deg);
transform: rotate(-20deg);
background-color:transparent;
/*-ms-filter: "progid:DXImageTransform.Microsoft.Matrix(M11=0.93969262, M12=0.34202014, M21=-0.34202014, M22=0.93969262,sizingMethod='auto expand')";*/
/*filter: progid:DXImageTransform.Microsoft.Matrix(M11=0.93969262, M12=0.34202014, M21=-0.34202014, M22=0.93969262,sizingMethod='auto expand');*/
filter: progid:DXImageTransform.Microsoft.Matrix(M11=0.93969262, M12=0.34202014, M21=-0.34202014, M22=0.93969262,sizingMethod='auto expand');
zoom: 1;
z-index:1;
position:absolute;
padding : 45px 10px 15px 10px;
The Final working piece of code. Credits for this go toe Jeff and Codler.
HTML:
<div id="banner">
<div>This is an example text</div>
</div>
Default CSS:
#banner > div
{
-moz-transform: rotate(-20deg); /*FF*/
-o-transform: rotate(-20deg); /*Opera*/
-webkit-transform: rotate(-20deg); /*Safari, Chrome*/
-ms-transform: rotate(-20deg) !important; /*IE9*/
transform: rotate(-20deg); /*CSS3 default*/
background-color:transparent;
zoom: 1;
z-index:1; /*NEEDED FOR IE8*/
width: 191px;
position:absolute;
padding : 45px 10px 15px 10px;
}
CSS FOR IE 7 & 8 - Loaded conditionally:
#banner
{
filter: progid:DXImageTransform.Microsoft.Matrix(M11=0.93969262, M12=0.34202014, M21=-0.34202014, M22=0.93969262,sizingMethod='auto expand') !important;
padding-top:0px;
}
In standards-compliant browsers, you can use the CSS3 property transform, though it's probably a good idea to use vendor prefixes, e.g.:
-o-transform: rotate(5deg);
-khtml-transform: rotate(5deg);
-webkit-transform: rotate(5deg);
-moz-transform: rotate(5deg);
In Internet Explorer 6 and 7, things get tricky. You can use IE's filter property to do rotation.
filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=1);
will rotate the element 90 degrees. You can also rotate 180 or 270 degrees using rotation=2 or rotation=3
Do you want to rotate something in IE to a different angle? Are you ready for the headache?
You can use IE's filter property again and specify matrix coordinates, and get something really ugly like this:
progid:DXImageTransform.Microsoft.Matrix(M11=0.99619470, M12=0.08715574, M21=-0.08715574, M22=0.99619470,sizingMethod='auto expand');
There are instructions on how to use the Matrix coordinates on this page, but frankly none of them make any sense. A better solution is to use this handy Matrix calculator that will generate the CSS you need when you specify the angle in degrees.
You can check out the CSS on my site to see an example, but I haven't checked it using IE in a while, so I can't make any promises...
It is possible to rotate with css3
transform: rotate(20deg);
Remember that some browser require vendor prefix.
.box_rotate {
-moz-transform: rotate(20deg); /* FF3.5+
-o-transform: rotate(20deg); /* Opera 10.5
-webkit-transform: rotate(20deg); /* Saf3.1+, Chrome
-ms-transform: rotate(20deg); /* IE9
transform: rotate(20deg);
filter: progid:DXImageTransform.Microsoft.Matrix(/* IE6–IE9
M11=0.9396926207859084, M12=-0.3420201433256687, M21=0.3420201433256687, M22=0.9396926207859084, sizingMethod='auto expand');
zoom: 1;
}
Source http://css3please.com/
It seems as if the black square in the background in IE9 happens when those nasty proprietary filters are also in the selector where you are doing css transforms.
It's not really possible in IE. At best, IE can only rotate in multiples of 90 degrees, and even that's a pain (IIRC). However, this answer claims otherwise.
For modern browsers, use the transform, -webkit-transform, and -moz-transform, as suggested already.
You might be able to bodge it using VML (Vector Markup Language) in IE. I think it can do arbitrary rotations.
Use this tool to generate CSS that will work cross browser:
http://www.useragentman.com/IETransformsTranslator/index.html
It really does work.
I am creating a simple game.
I want to use jQUERY to rotate the joints making it move. I am using .animate ( http://api.jquery.com/animate/ ) to animate CSS properties but if it is also possible to use Javscript, I can make my own custom code.
More TO-THE-POINT
How do I rotate images in CSS or Javascript? I prefer CSS but Javascript is fine too.
If it is impossible (which I am pretty sure it is but I am not giving up yet) is there any other possible way to do what i am trying to do without making a bunch of seperate images, each rotated a different way.
Or can anyone at least give me an example of a site that does something similar.
EDIT: I need 1 CSS property (no -something: rotation(500deg);) that works with FireFox, Safari and Chrome because those are the only browsers I really work with.
Firefox and the Webkit browsers support a "transform" CSS property ("-webkit-transform", "-moz-transform"). Those can do all sorts of interesting things. There's a very weak IE tool that allows very limited rotation, so it's not really an option for something like a game.
Here's a demo page I made for another Stackoverflow question a few days ago: http://gutfullofbeer.net/compass.html
As shown in the image above
1) is -90 degree or 270 degree rotation
2) is +90 degree rotation and
3) is 180 degree rotation.
Note :- The quadrant containing blue square is the original image position in web browser when displayed with img tag. This is the only visible section to developer in web browser. On rotation of image from its top left point it will switch to the invisible quadrant. Hence it is very very important to use translateX and translateY property along with rotate property in css to drag the image from invisible quadrant to visible quadrant to display it on web browser. Please refer to css transform property for more info.
The css for the same is as below
.image_rotate_270 {
transform-origin: top left; /* IE 10+, Firefox, etc. */
-webkit-transform-origin: top left; /* Chrome */
-ms-transform-origin: top left; /* IE 9 */
transform: rotate(270deg) translateX(-100%);
-webkit-transform: rotate(270deg) translateX(-100%);
-ms-transform: rotate(270deg) translateX(-100%);
}
.image_rotate_90 {
transform-origin: top left; /* IE 10+, Firefox, etc. */
-webkit-transform-origin: top left; /* Chrome */
-ms-transform-origin: top left; /* IE 9 */
transform: rotate(90deg) translateY(-100%);
-webkit-transform: rotate(90deg) translateY(-100%);
-ms-transform: rotate(90deg) translateY(-100%);
}
.image_rotate_180 {
transform-origin: top left; /* IE 10+, Firefox, etc. */
-webkit-transform-origin: top left; /* Chrome */
-ms-transform-origin: top left; /* IE 9 */
transform: rotate(180deg) translateX(-100%) translateY(-100%);
-webkit-transform: rotate(180deg) translateX(-100%) translateY(-100%);
-ms-transform: rotate(180deg) translateX(-100%) translateY(-100%);
}
Now use this class names inside the class property of img tag.
<img src="xyz.jpg" id="image" class="image_rotate_90"/>
For rotation of -90 and +90 you will sometimes need to alter its height and width either with screen resolution or with original image resolution so that image will retain its original shape. Do it using javascript inside the body tag after image is loaded.
<script>
document.getElementById("image").width = screen.height;
document.getElementById("image").height = screen.width;
</script>
Suppose your original image is of 640 X 480 resolution. i.e. width = 480 and height = 640. So when you rotate the image, it becomes a image with resolution 480 X 640. So to retain its original shape. You can do the following under body tag after image loaded .
<script>
document.getElementById("image").width = 480px;
document.getElementById("image").height = 640px;
</script>
Some browsers support this:
Rotate That Image with CSS
Not a full answer, but in case it's helpful here's a fun little bookmarklet I have in Safari (works in chrome as well) that will cause the page contents to rotate:
javascript:(function(){var%20d=0;setInterval(function(){document.body.style['-webkit-transform']='rotate('+%20d%20+'deg)';d+=1},10)}());
I figured it might be helpful to see an example usage.
Not ideal, but you could make separate image files for each rotated state of the image, then use JavaScript to change <img src="XXX" /> or CSS to change background-image: url('XXX'); Once the images have loaded (you could even pre-load them with JS), the animation between them should be very fast.
Have you ever tried: http://jqueryrotate.com/ ??
Works great in all modern browsers including IE>=6