html - CSS Cross-browser Text Rotation -


i having problems getting text rotation work in both chrome , ie (11.0). in ie texts rotates 180 , 360 degrees instead of 90 , 270.

this css-style (among others) have tested:

.rot90 {     -webkit-transform:rotate(90deg);     -moz-transform:rotate(90deg);     -ms-transform:rotate(90deg);     -o-transform:rotate(90deg);     transform:rotate(90deg);      -webkit-transform-origin: 0px 0px;     -moz-transform-origin: 0px 0px;     -ms-transform-origin: 0px 0px;     -o-transform-origin: 0px 0px;     transform-origin: 0px 0px;      border: 0px solid;     white-space: nowrap;     position:absolute;     display:inline-block;      padding-bottom: 5px;      writing-mode: tb-rl; }  .rot270 {     -webkit-transform:rotate(270deg);     -moz-transform:rotate(270deg);     -ms-transform:rotate(270deg);     -o-transform:rotate(270deg);     transform:rotate(270deg);      -webkit-transform-origin: 0px 0px;     -moz-transform-origin: 0px 0px;     -ms-transform-origin: 0px 0px;     -o-transform-origin: 0px 0px;     transform-origin: 0px 0px;      border: 0px solid;     white-space: nowrap;     position:absolute;     display:inline-block;      padding-bottom: 5px;      writing-mode: tb-rl; }

i need transform origin at: 0px 0px.

here jsfiddle:

another jsfiddle using http://www.boogdesign.com/examples/transforms/matrix-calculator.html

update

here working solution based on marked answer, writing-mode messed things up: https://jsfiddle.net/wonc4px9/6/

.rot90 {     -ms-filter: "progid:dximagetransform.microsoft.matrix(m11=0.00000000, m12=-1.00000000, m21=1.00000000, m22=0.00000000,sizingmethod='auto expand')";     filter: progid:dximagetransform.microsoft.matrix(m11=0.00000000, m12=-1.00000000, m21=1.00000000, m22=0.00000000,sizingmethod='auto expand');     -moz-transform:  matrix(0.00000000, 1.00000000, -1.00000000, 0.00000000, 0, 0);     -webkit-transform:  matrix(0.00000000, 1.00000000, -1.00000000, 0.00000000, 0, 0);     -o-transform:  matrix(0.00000000, 1.00000000, -1.00000000, 0.00000000, 0, 0);      -ms-transform:rotate(90deg);      -webkit-transform-origin: 0px 0px;     -moz-transform-origin: 0px 0px;     -ms-transform-origin: 0px 0px;     -o-transform-origin: 0px 0px;     transform-origin: 0px 0px;      border: 0px solid;     white-space: nowrap;     position:absolute;     display:inline-block;      padding-bottom: 5px; }  .rot270 {      -ms-filter: "progid:dximagetransform.microsoft.matrix(m11=-0.00000000, m12=1.00000000, m21=-1.00000000, m22=-0.00000000,sizingmethod='auto expand')";     filter: progid:dximagetransform.microsoft.matrix(m11=-0.00000000, m12=1.00000000, m21=-1.00000000, m22=-0.00000000,sizingmethod='auto expand');     -moz-transform:  matrix(-0.00000000, -1.00000000, 1.00000000, -0.00000000, 0, 0);     -webkit-transform:  matrix(-0.00000000, -1.00000000, 1.00000000, -0.00000000, 0, 0);     -o-transform:  matrix(-0.00000000, -1.00000000, 1.00000000, -0.00000000, 0, 0);      -ms-transform:rotate(270deg);      -webkit-transform-origin: 0px 0px;     -moz-transform-origin: 0px 0px;     -ms-transform-origin: 0px 0px;     -o-transform-origin: 0px 0px;     transform-origin: 0px 0px;      border: 0px solid;     white-space: nowrap;     position:absolute;     display:inline-block;      padding-bottom: 5px; }

try website generate css rule ie.matrix calculator

in answer part it's explained how use , why need it.

it this:

.rot90 { -ms-filter:"the rule website" -webkit-transform:rotate(90deg); -moz-transform:rotate(90deg); -ms-transform:rotate(90deg); -o-transform:rotate(90deg); transform:rotate(90deg);  -webkit-transform-origin: 0px 0px; -moz-transform-origin: 0px 0px; -ms-transform-origin: 0px 0px; -o-transform-origin: 0px 0px; transform-origin: 0px 0px;  border: 0px solid; white-space: nowrap; position:absolute; display:inline-block;  padding-bottom: 5px;  writing-mode: tb-rl;}

Comments

Post a Comment

Popular posts from this blog

searchKeyword not working in AngularJS filter -

i writing app using angularjs on front end. want search through table word/field; 1 search box everything. according article here: http://hello-angularjs.appspot.com/searchtable can use filter: searchkeyword this. this code, , not working expected. <label>search: <input ng-model="searchkeyword"></label> <table ng-repeat="post in posts | orderby: sort | filter: searchkeyword"> <tr> <td> {{index(post)}} </td> <td> {{post.title}} </td> <td> {{post.author}} </td> <td> {{post.content}} </td> <td> {{post.date | date: "d/m/yyyy"}} </td> </tr> </table> what should do? thank you try this: controller $scope.posts = [ {title:'title one', author:'author one', content: 'content one'}, {title:'title two', author:'author two', content: 'cont...
Read more

sequelize.js - Sequelize: sort by enum cases -

i have model ( article ) field (the name type ) of type enum('source', 'translated') , return 1 article ordered type field. source articles should returned before translated articles. like: article.findone(order: [ { type: [ 'source', 'translated' ] } ]); unfortunately there appears no built-in solution sorting enums. instead have sort by case , couldn't find documentation on how sequelize. what conventional approach here? sorting case hard in sequelize, sort field (the second answer in linked post) should possible: order: sequelize.fn('field', sequelize.col('type'), 'source', 'translated') it's supported mysql far know though
Read more

user interface - how to replace an ongoing process of image capture from another process call over the same ImageLabel in python's GUI TKinter -

i trying use following code create interactive gui changes color-space(hsv, rbg, grayscale etc) on event of button click. display opencv video in tkinter using multiprocessing being new python having problems multiprocessing , attempts on making gui change it's color space on button clicks hangs entire system. on it's implementation highly appreciated. thankyou. below code: import cv2 pil import image,imagetk import tkinter tk import numpy np multiprocessing import process , queue def quit_it(root,process): root.destroy() process.terminate() def black_andwhite(root,process): process.terminate p=process(target=capture_image, args=(5,queue, )) p.start() root.after(0, func=lambda: update_all(root, image_label, queue)) def update_image(image_label, queue): frame = queue.get() = image.fromarray(frame) b = imagetk.photoimage(image=a) image_label.configure(image=b) image_label._image_cache = b root.update() def update_all(root...
Read more