I have created a demo that showcases 5 floating <div>s with rotated text of various lengths. Is there a way to implement a CSS class that can centrally align all text, regardless of length? Currently, I find myself creating a new class for each character length in my stylesheet, which could become cumbersome. Additionally, adjusting the size of the enclosing <div> disrupts the offsets.
Although I intend to apply these classes to divs through jQuery, ensuring cross-browser compatibility still requires setting up individual classes.
.transform3 {
-webkit-transform-origin: 65% 100%;
-moz-transform-origin: 65% 100%;
-ms-transform-origin: 65% 100%;
-o-transform-origin: 65% 100%;
transform-origin: 65% 100%;
}
.transform4 {
-webkit-transform-origin: 70% 110%;
-moz-transform-origin: 70% 110%;
-ms-transform-origin: 70% 110%;
-o-transform-origin: 70% 110%;
transform-origin: 70% 110%;
}
.transform5 {
-webkit-transform-origin: 80% 120%;
-moz-transform-origin: 80% 120%;
-ms-transform-origin: 80% 120%;
-o-transform-origin: 80% 120%;
transform-origin: 80% 120%;
}
.transform6 {
-webkit-transform-origin: 85% 136%;
-moz-transform-origin: 85% 136%;
-ms-transform-origin: 85% 136%;
-o-transform-origin: 85% 136%;
transform-origin: 85% 136%;
}
.transform7 {
-webkit-transform-origin: 90% 150%;
-moz-transform-origin: 90% 150%;
-ms-transform-origin: 90% 150%;
-o-transform-origin: 90% 150%;
transform-origin: 90% 150%;
}
Note: The offset values were estimated visually.
Update
While I initially hoped to handle this with a stylesheet, it seems I may need to calculate the CSS transformations in JavaScript instead.
I have now developed a different demo to illustrate dynamic transformations. In this demo, users can adjust the font-size within the .v_text class, and if the text length remains within the height of the .v_text_wrapper, the text should align vertically at the center. However, please be aware that adjustments to the magicOffset value may be necessary.
Interestingly, this method doesn't seem to work on iOS... Thank you @Dinesh Kumar DJ