Set height on div with CSS3 transform (rotate) - javascript

Goal
I'm working on a collapsible sidebar using jQuery for animation. I would like to have vertical text on the sidebar that acts as a label and can swap on the animateOut/animateIn effect.
Normally I would use an image of the text that I've simply swapped vertically, and switch it out on animation, but with CSS3 transforms I'd like to get it to work instead.
Problem
The problem I'm facing is that setting the height on my rotated container makes it expand horizontally (as it's rotated 90deg) so that doesn't work. I then tried to set the width (hoping it would expand vertically, acting as height), but that has an odd effect of causing the width of my parent container to expand as well.
Fix?
How can I set the height on a rotated (transformed) element without affecting the width of the parent container? So far I have been unable to do this.
Live Example
Here's a fiddle that demonstrates my problem: Fiddle
The collapse-pane class is what I have rotated and contains the span I have my text inside. You'll notice it has a width set, that widens the border, but also affects the parent container.
The code:
CSS:
.right-panel{
position:fixed;
right:0;
top:0;
bottom:0;
border:1px solid #ccc;
background-color:#efefef;
}
.collapse-pane{
margin-top:50px;
width:30px;
border:1px solid #999;
cursor:pointer;
/* 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);
}
.collapse-pane span{
padding:5px;
}
HTML
<div class="right-panel">
<div class="collapse-pane">
<span class="expand">Expand</span>
</div>
<div style="width:0;" class="panel-body">
<div style="display:none;" class="panel-body-inner">
adsfasdfasdf
</div>
</div>
</div>
Here's an image also showing the problem, so you don't have to view the Fiddle.
Update
I've made the problem statement a little clearer, as my original post was confusing the issues.
Thanks for any help!


If you don't want the rotated divs size expand it's parent size, you need to take it out of the flow. You may use absolute positioning for this.
The following demo uses this technique and also positions the "expand" element by setting a transform orign and top/right values.
DEMO
CSS :
.right-panel {
position:fixed;
right:0;
top:0;
bottom:0;
border:1px solid #ccc;
background-color:#efefef;
}
.collapse-pane {
position:absolute;
border:1px solid #999;
cursor:pointer;
top:20%;
right:100%;
-ms-transform-origin:100% 100%;
-webkit-transform-origin: 100% 100%;
transform-origin: 100% 100%;
/* 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);
}
.collapse-pane span {
padding:5px;
}
jQuery :
$(document).ready(function () {
var height = $(".right-panel").height();
$('.collapse-pane').click(function () {
if ($(".collapse-pane span").html() == "Expand") {
$(".panel-body").animate({
width: 200
}, 400);
$(".panel-body-inner").fadeIn(500);
$(".collapse-pane span").html("Collapse");
} else {
$(".panel-body").animate({
width: 00
}, 400);
$(".panel-body-inner").fadeOut(300);
$(".collapse-pane span").html("Expand");
}
});
});

Related

Rotate Text without effecting td width [duplicate]

I have been trying text to go in a vertical direction like we can do in ms-word tables but so far I have only been able to do THIS... which I am not happy with because it's a box rotated... Isn't there a way to have actual vertical direction text?
I only set the rotation to 305 degrees in the demo which doesn't make the text vertical. 270deg will but I only made the demo to show rotation.

Alternative approach: http://www.thecssninja.com/css/real-text-rotation-with-css
p { writing-mode: tb-rl; }

-webkit-transform: rotate(90deg);
The other answers are correct but they led to some alignment problems. On trying out different things this CSS piece code worked perfectly for me.
.vertical{
writing-mode:tb-rl;
-webkit-transform:rotate(90deg);
-moz-transform:rotate(90deg);
-o-transform: rotate(90deg);
-ms-transform:rotate(90deg);
transform: rotate(90deg);
white-space:nowrap;
display:block;
bottom:0;
width:20px;
height:20px;
}

I was searching for an actual vertical text and not the rotated text in HTML as shown below. So I could achieve it by using the following method.
HTML:-
<p class="vericaltext">
Hi This is Vertical Text!
</p>
CSS:-
.vericaltext{
writing-mode: vertical-lr;
text-orientation: upright;
}
JSFiddle DEMO
======================= OLD Answer ==========================
HTML:-
<p class="vericaltext">
Hi This is Vertical Text!
</p>
CSS:-
.vericaltext{
width:1px;
word-wrap: break-word;
font-family: monospace; /* this is just for good looks */
}
JSFiddle! Demo.
Update:- If you need the whitespaces to be displayed, then add the following property to your css.
white-space: pre;
So, the css class shall be
.vericaltext{
width:1px;
word-wrap: break-word;
font-family: monospace; /* this is just for good looks */
white-space: pre;/* this is for displaying whitespaces */
}
JSFiddle! Demo With Whitespace
Update 2 (28-JUN-2015)
Since white-space: pre; doesnt seem to work (for this specific use) on Firefox(as of now), just change that line to
white-space: pre-wrap;
So, the css class shall be
.vericaltext{
width:1px;
word-wrap: break-word;
font-family: monospace; /* this is just for good looks */
white-space:pre-wrap; /* this is for displaying whitespaces including Moz-FF.*/
}
JsFiddle Demo FF Compatible.

To rotate text 90 degrees:
-webkit-transform: rotate(90deg);
-moz-transform: rotate(90deg);
-ms-transform: rotate(90deg);
-o-transform: rotate(90deg);
transform: rotate(90deg);
Also, it appears that the span tag can't be rotated without being set to display:block.

To display text in vertical (Bottom-top) we can simply use:
writing-mode: vertical-lr;
transform: rotate(180deg);
#myDiv{
text-align: center;
}
#mySpan{
writing-mode: vertical-lr;
transform: rotate(180deg);
}
<div id="myDiv">
<span id="mySpan"> Here We gooooo !!! </span>
</div>
Note we can add this to ensure Browser Compatibility:
-webkit-transform: rotate(180deg);
-moz-transform: rotate(180deg);
-ms-transform: rotate(180deg);
-o-transform: rotate(180deg);
transform: rotate(180deg);
we can also read more about writing-mode property here on Mozilla docs.

For vertical text with characters one below another in firefox use:
text-orientation: upright;
writing-mode: vertical-rl;

Try using:
writing-mode: lr-tb;

#myDiv{
text-align: center;
}
#mySpan{
writing-mode: vertical-lr;
transform: rotate(180deg);
}
<div id="myDiv">
<span id="mySpan"> Here We gooooo !!! </span>
</div>

Here is an example of some SVG code I used to get three lines of vertical text into a table column heading. Other angles are possible with a bit of tweaking. I believe most browsers support SVG these days.
<svg height="150" width="40">
<text font-weight="bold" x="-150" y="10" transform="rotate(-90 0 0)">Jane Doe</text>
<text x="-150" y="25" transform="rotate(-90 0 0)">0/0 0/0</text>
<text x="-150" y="40" transform="rotate(-90 0 0)">2015-06-06</text>
Sorry, your browser does not support inline SVG.
</svg>

I'm new at this, it helped me a lot. Just change width, height, top and left to make it fit:
.vertical-text {
display: block;
position:absolute;
width: 0px;
height: 0px;
top: 0px;
left: 0px;
transform: rotate(90deg);
}
You can also go here and see another way to do it. The author does it like this:
.vertical-text {
transform: rotate(90deg);
transform-origin: left top 0;
float: left;
}

You do with this too...
.p{
writing-mode: vertical-rl;
text-orientation: upright;
}

rotation, like you did, is the way to go - but note that not all browsers support that. if you wan't to get a cross-browser solution, you'll have to generate pictures for that.

Can use CSS3 Transform property
.txtdiv{
transform:rotate(7deg);
-ms-transform:rotate(7deg); /* IE 9 */
-ms-filter: "progid:DXImageTransform.Microsoft.Matrix(M11=0.93969262, M12=0.34202014, M21=-0.34202014, M22=0.93969262,sizingMethod='auto expand')"; /* IE6-8 */
-webkit-transform:rotate(7deg); /* Opera, Chrome, and Safari */
}

Add the class
.rotate {
-webkit-transform: rotate(-90deg);
-moz-transform: rotate(-90deg);
}
I use this pretty much everyday and not had any issues whatsoever with it.
https://css-tricks.com/snippets/css/text-rotation/

I've manage to have a working solution with this :
(I have a title within a middleItem class div)
.middleItem > .title{
width: 5px;
height: auto;
word-break:break-all;
font-size: 150%;
}

You can achieve the same with the below CSS properties:
writing-mode: vertical-rl;
text-orientation: upright;

If you want an alignement like
S
T
A
R
T
Then follow https://www.w3.org/International/articles/vertical-text/#upright-latin
Example:
div.vertical-sentence{
-ms-writing-mode: tb-rl; /* for IE */
-webkit-writing-mode: vertical-rl; /* for Webkit */
writing-mode: vertical-rl;
}
.rotate-characters-back-to-horizontal{
-webkit-text-orientation: upright; /* for Webkit */
text-orientation: upright;
}
<div class="vertical-sentence">
<p><span class="rotate-characters-back-to-horizontal" lang="en">Whatever</span></p>
<p><span class="rotate-characters-back-to-horizontal" lang="fr">Latin</span></p>
<p><span class="rotate-characters-back-to-horizontal" lang="hi">वर्डप्रेस </span></p>
</div>
Note the Hindi has an accent in my example and that will be rendered as a single character. That's the only issue I faced with this solution.

Best solution would be to use writing-mode
writing-mode: vertical-rl;
https://developer.mozilla.org/en-US/docs/Web/CSS/writing-mode
It defines whether lines of text are laid out horizontally or vertically and the direction in which blocks progress.
It has good browser support, but will not work on IE8 (if you care about IE)
http://caniuse.com/#feat=css-writing-mode

.vertical-text {
transform: rotate(90deg);
transform-origin: left top 0;
float: left;
}

<!DOCTYPE html>
<html>
<style>
h2 {
margin: 0 0 0 0;
transform: rotate(270deg);
transform-origin: top left;
color: #852c98;
position: absolute;
top: 200px;
}
</style>
<body>
<h2>It’s all in the curd</h2>
</body>
</html>

From developer.mozilla.org
The text-orientation CSS property sets the orientation of the text characters in a line. It only affects text in vertical mode (when writing-mode is not horizontal-tb). It is useful for controlling the display of languages that use vertical script, and also for making vertical table headers.
writing-mode: vertical-rl;
text-orientation: mixed;
You can also review all the Syntax here
/* Keyword values */
text-orientation: mixed;
text-orientation: upright;
text-orientation: sideways-right;
text-orientation: sideways;
text-orientation: use-glyph-orientation;
/* Global values */
text-orientation: inherit;
text-orientation: initial;
text-orientation: unset;

You can use word-wrap:break-word to get vertical text
use following snippete
HTML:
<div class='verticalText mydiv'>Here is your text</div>
css:
.verticalText {
word-wrap: break-word;
font-size: 18px;
}
.mydiv {
height: 300px;
width: 10px;
}

<style>
#text_orientation{
writing-mode:tb-rl;
transform: rotate(90deg);
white-space:nowrap;
display:block;
bottom:0;
width:20px;
height:20px;
}
</style>
</head>
<body>
<p id="text_orientation">Welcome</p>
</body>

h1{word-break:break-all;display:block;width:40px;}
H E L L O
NOTE: Browser Supported
- IE browser (8,9,10,11)
- Firefox browser (38,39,40,41,42,43,44)
- Chrome browser (44,45,46,47,48)
- Safari browser (8,9)
- Opera browser (Not Supported)
- Android browser (44)

Try using an SVG file, it seems to have better browser compatibility, and won't break your responsive designs.
I tried the CSS transform, and had much trouble with the transform-origin; and ended up going with an SVG file. It took like 10 minutes, and I could control it a bit with CSS too.
You can use Inkscape to make the SVG if you don't have Adobe Illustrator.

This works as well:
transform: rotate(90deg);

You can try like this
-webkit-transform: rotate(270deg);
-moz-transform: rotate(270deg);
-ms-transform: rotate(270deg);
-o-transform: rotate(270deg);
transform: rotate(270deg);

This is a bit hacky but cross browser solution which requires no CSS
<div>
<div>h</div>
<div>e</div>
<div>l</div>
<div>l</div>
<div>o</div>
<div>

How to word wrap rotated text based on cell height, not width? [duplicate]

I have been trying text to go in a vertical direction like we can do in ms-word tables but so far I have only been able to do THIS... which I am not happy with because it's a box rotated... Isn't there a way to have actual vertical direction text?
I only set the rotation to 305 degrees in the demo which doesn't make the text vertical. 270deg will but I only made the demo to show rotation.

Alternative approach: http://www.thecssninja.com/css/real-text-rotation-with-css
p { writing-mode: tb-rl; }

-webkit-transform: rotate(90deg);
The other answers are correct but they led to some alignment problems. On trying out different things this CSS piece code worked perfectly for me.
.vertical{
writing-mode:tb-rl;
-webkit-transform:rotate(90deg);
-moz-transform:rotate(90deg);
-o-transform: rotate(90deg);
-ms-transform:rotate(90deg);
transform: rotate(90deg);
white-space:nowrap;
display:block;
bottom:0;
width:20px;
height:20px;
}

I was searching for an actual vertical text and not the rotated text in HTML as shown below. So I could achieve it by using the following method.
HTML:-
<p class="vericaltext">
Hi This is Vertical Text!
</p>
CSS:-
.vericaltext{
writing-mode: vertical-lr;
text-orientation: upright;
}
JSFiddle DEMO
======================= OLD Answer ==========================
HTML:-
<p class="vericaltext">
Hi This is Vertical Text!
</p>
CSS:-
.vericaltext{
width:1px;
word-wrap: break-word;
font-family: monospace; /* this is just for good looks */
}
JSFiddle! Demo.
Update:- If you need the whitespaces to be displayed, then add the following property to your css.
white-space: pre;
So, the css class shall be
.vericaltext{
width:1px;
word-wrap: break-word;
font-family: monospace; /* this is just for good looks */
white-space: pre;/* this is for displaying whitespaces */
}
JSFiddle! Demo With Whitespace
Update 2 (28-JUN-2015)
Since white-space: pre; doesnt seem to work (for this specific use) on Firefox(as of now), just change that line to
white-space: pre-wrap;
So, the css class shall be
.vericaltext{
width:1px;
word-wrap: break-word;
font-family: monospace; /* this is just for good looks */
white-space:pre-wrap; /* this is for displaying whitespaces including Moz-FF.*/
}
JsFiddle Demo FF Compatible.

To rotate text 90 degrees:
-webkit-transform: rotate(90deg);
-moz-transform: rotate(90deg);
-ms-transform: rotate(90deg);
-o-transform: rotate(90deg);
transform: rotate(90deg);
Also, it appears that the span tag can't be rotated without being set to display:block.

To display text in vertical (Bottom-top) we can simply use:
writing-mode: vertical-lr;
transform: rotate(180deg);
#myDiv{
text-align: center;
}
#mySpan{
writing-mode: vertical-lr;
transform: rotate(180deg);
}
<div id="myDiv">
<span id="mySpan"> Here We gooooo !!! </span>
</div>
Note we can add this to ensure Browser Compatibility:
-webkit-transform: rotate(180deg);
-moz-transform: rotate(180deg);
-ms-transform: rotate(180deg);
-o-transform: rotate(180deg);
transform: rotate(180deg);
we can also read more about writing-mode property here on Mozilla docs.

For vertical text with characters one below another in firefox use:
text-orientation: upright;
writing-mode: vertical-rl;

Try using:
writing-mode: lr-tb;

#myDiv{
text-align: center;
}
#mySpan{
writing-mode: vertical-lr;
transform: rotate(180deg);
}
<div id="myDiv">
<span id="mySpan"> Here We gooooo !!! </span>
</div>

Here is an example of some SVG code I used to get three lines of vertical text into a table column heading. Other angles are possible with a bit of tweaking. I believe most browsers support SVG these days.
<svg height="150" width="40">
<text font-weight="bold" x="-150" y="10" transform="rotate(-90 0 0)">Jane Doe</text>
<text x="-150" y="25" transform="rotate(-90 0 0)">0/0 0/0</text>
<text x="-150" y="40" transform="rotate(-90 0 0)">2015-06-06</text>
Sorry, your browser does not support inline SVG.
</svg>

I'm new at this, it helped me a lot. Just change width, height, top and left to make it fit:
.vertical-text {
display: block;
position:absolute;
width: 0px;
height: 0px;
top: 0px;
left: 0px;
transform: rotate(90deg);
}
You can also go here and see another way to do it. The author does it like this:
.vertical-text {
transform: rotate(90deg);
transform-origin: left top 0;
float: left;
}

You do with this too...
.p{
writing-mode: vertical-rl;
text-orientation: upright;
}

rotation, like you did, is the way to go - but note that not all browsers support that. if you wan't to get a cross-browser solution, you'll have to generate pictures for that.

Can use CSS3 Transform property
.txtdiv{
transform:rotate(7deg);
-ms-transform:rotate(7deg); /* IE 9 */
-ms-filter: "progid:DXImageTransform.Microsoft.Matrix(M11=0.93969262, M12=0.34202014, M21=-0.34202014, M22=0.93969262,sizingMethod='auto expand')"; /* IE6-8 */
-webkit-transform:rotate(7deg); /* Opera, Chrome, and Safari */
}

Add the class
.rotate {
-webkit-transform: rotate(-90deg);
-moz-transform: rotate(-90deg);
}
I use this pretty much everyday and not had any issues whatsoever with it.
https://css-tricks.com/snippets/css/text-rotation/

I've manage to have a working solution with this :
(I have a title within a middleItem class div)
.middleItem > .title{
width: 5px;
height: auto;
word-break:break-all;
font-size: 150%;
}

You can achieve the same with the below CSS properties:
writing-mode: vertical-rl;
text-orientation: upright;

If you want an alignement like
S
T
A
R
T
Then follow https://www.w3.org/International/articles/vertical-text/#upright-latin
Example:
div.vertical-sentence{
-ms-writing-mode: tb-rl; /* for IE */
-webkit-writing-mode: vertical-rl; /* for Webkit */
writing-mode: vertical-rl;
}
.rotate-characters-back-to-horizontal{
-webkit-text-orientation: upright; /* for Webkit */
text-orientation: upright;
}
<div class="vertical-sentence">
<p><span class="rotate-characters-back-to-horizontal" lang="en">Whatever</span></p>
<p><span class="rotate-characters-back-to-horizontal" lang="fr">Latin</span></p>
<p><span class="rotate-characters-back-to-horizontal" lang="hi">वर्डप्रेस </span></p>
</div>
Note the Hindi has an accent in my example and that will be rendered as a single character. That's the only issue I faced with this solution.

Best solution would be to use writing-mode
writing-mode: vertical-rl;
https://developer.mozilla.org/en-US/docs/Web/CSS/writing-mode
It defines whether lines of text are laid out horizontally or vertically and the direction in which blocks progress.
It has good browser support, but will not work on IE8 (if you care about IE)
http://caniuse.com/#feat=css-writing-mode

.vertical-text {
transform: rotate(90deg);
transform-origin: left top 0;
float: left;
}

<!DOCTYPE html>
<html>
<style>
h2 {
margin: 0 0 0 0;
transform: rotate(270deg);
transform-origin: top left;
color: #852c98;
position: absolute;
top: 200px;
}
</style>
<body>
<h2>It’s all in the curd</h2>
</body>
</html>

From developer.mozilla.org
The text-orientation CSS property sets the orientation of the text characters in a line. It only affects text in vertical mode (when writing-mode is not horizontal-tb). It is useful for controlling the display of languages that use vertical script, and also for making vertical table headers.
writing-mode: vertical-rl;
text-orientation: mixed;
You can also review all the Syntax here
/* Keyword values */
text-orientation: mixed;
text-orientation: upright;
text-orientation: sideways-right;
text-orientation: sideways;
text-orientation: use-glyph-orientation;
/* Global values */
text-orientation: inherit;
text-orientation: initial;
text-orientation: unset;

You can use word-wrap:break-word to get vertical text
use following snippete
HTML:
<div class='verticalText mydiv'>Here is your text</div>
css:
.verticalText {
word-wrap: break-word;
font-size: 18px;
}
.mydiv {
height: 300px;
width: 10px;
}

<style>
#text_orientation{
writing-mode:tb-rl;
transform: rotate(90deg);
white-space:nowrap;
display:block;
bottom:0;
width:20px;
height:20px;
}
</style>
</head>
<body>
<p id="text_orientation">Welcome</p>
</body>

h1{word-break:break-all;display:block;width:40px;}
H E L L O
NOTE: Browser Supported
- IE browser (8,9,10,11)
- Firefox browser (38,39,40,41,42,43,44)
- Chrome browser (44,45,46,47,48)
- Safari browser (8,9)
- Opera browser (Not Supported)
- Android browser (44)

Try using an SVG file, it seems to have better browser compatibility, and won't break your responsive designs.
I tried the CSS transform, and had much trouble with the transform-origin; and ended up going with an SVG file. It took like 10 minutes, and I could control it a bit with CSS too.
You can use Inkscape to make the SVG if you don't have Adobe Illustrator.

This works as well:
transform: rotate(90deg);

You can try like this
-webkit-transform: rotate(270deg);
-moz-transform: rotate(270deg);
-ms-transform: rotate(270deg);
-o-transform: rotate(270deg);
transform: rotate(270deg);

This is a bit hacky but cross browser solution which requires no CSS
<div>
<div>h</div>
<div>e</div>
<div>l</div>
<div>l</div>
<div>o</div>
<div>

Zoom in/out and rotate div with smooth transition

my first post!
I have been doing some experiments, trying to recreate something i saw.
Here is what i am trying to achieve:
Scroll at the end of this page and take a look at animated buttons for twitter, youtube, facebook
Now take a look at my code:
HTML
<div class="container">
<div class="letter">A</div>
</div>
CSS
*{
margin:0;
padding:0;
}
.container{
width:200px;
height:200px;
background:purple;
overflow:hidden;
}
.letter{
text-align:center;
font-size:50px;
line-height:170px;
color:white;
}
.letter:hover{
cursor:pointer;
}
.letter.zoom{
transform:rotate(15deg) scale(3);
transition: transform 0.6s ease;
}
Jquery
$(function(){
$('.container').on('click', function(){
$('.letter').toggleClass('zoom');
});
});
Now, if you run the code, you will see letter A, and on click it will zoom in and slightly rotate. Here are my issues:
1.how to do this on hover, using css3 or jquery or javascript?(not onmouseover/onmouseout)
2.how to make the rendering smoother?(the letter zooms in in poor resolution and than renders to full quality)
3.it has animated transition on zoom in. When it zooms out there is no animation or transition. How to do the animation on zoom out, on hover out?
I have tried to do separately just zoom in and just rotate, and it works, but if i want to do both in the same time, CSS3 is overriding one with another, and using this function is not giving me the result i want.

You can do this with just CSS:
Transition:
.letter {
transition: ease .25s; // when set on selector itself, will apply to all pseudo-classes such as: :hover, :active, :focus, etc.
-webkit-transition: ease .25s;
}
Zoom:
.letter:hover {
transform: scale(1.5); // Alternatively, you can use percentages
-wekbit-transform: scale(1.5); // Chrome / Safari
-moz-transform: scale(1.5); // Firefox
}
Rotate:
.letter:hover {
transform: rotate(15deg);
-wekbit-transform: rotate(15deg); // Chrome / Safari
-moz-transform: rotate(15deg); // Firefox
}

Force the browser to load the page in portrait orientation

I need to show up my page on mobile Phones and Tablets in portrait mode. How can I force the browser to load it in this orientation. Or how can I disable the landscape Orientation at all?

You can not force it :(
The browser is an application on mobile which has the capability to show in landscape or portrait.
So: your question can be reasked as: "is it possible to ask the browser to open only in landscape ?" May be some custom page directive can tell the browser to open itself in landscape mode (search may be you can find some thing here! )
However you can do a css trick (which is not some how recommended) as mentioned in https://www.quora.com/Can-I-use-Javascript-to-force-a-mobile-browser-to-stay-in-portrait-or-landscape-mode
The idea is to use css rotate on all page content
#media screen and (orientation:landscape) {
//set you content id
#container {
-ms-transform: rotate(-90deg); /* IE 9 */
-webkit-transform: rotate(-90deg); /* Chrome, Safari, Opera */
transform: rotate(-90deg);
width: /* screen width */ ;
height: /* screen height */ ;
overflow: scroll;
}
}
I recommend solutions mentioned at forcing web-site to show in landscape mode only which gently ask user to rotate the browser (#JasonSebring)
<style type="text/css">
#warning-message { display: none; }
#media only screen and (orientation:portrait){
#wrapper { display:none; }
#warning-message { display:block; }
}
#media only screen and (orientation:landscape){
#warning-message { display:none; }
}
</style>
....
<div id="wrapper">
<!-- your html for your website -->
</div>
<div id="warning-message">
this website is only viewable in landscape mode
</div>

#container {
display: block;
}
#media only screen and (orientation: portrait) {
#container {
height: 100vh;
width: 100vh;
overflow-x: auto;
position: absolute;
top: 100%;
right: 0;
transform-origin: 100% 0vh 0;
transform: rotate(90deg);
-webkit-transform: rotate(90deg);
-moz-transform: rotate(90deg);
-o-transform: rotate(90deg);
-ms-transform: rotate(90deg);
transform: rotate(90deg);
}
}
#media only screen and (orientation:landscape) {
#container {
-webkit-transform: rotate(0deg);
-moz-transform: rotate(0deg);
-o-transform: rotate(0deg);
-ms-transform: rotate(0deg);
transform: rotate(0deg);
}
}

Maybe you can set a fixed width in yours container css class and use a margin: 0 auto too, so you will have the content set in the center giving the impression of the page always in portrait position, for exemple:
.container{
width:320px;
margin: 0 auto;
}

z-index qith jquery not working on rotated image

JsFiddle: http://jsfiddle.net/E4s9k/
HTML:
<body>
<section id="pics" class="clearfix">
<figure
id="pic1"
class="pictures"
>
<img
alt="figure1"
src="http://b-i.forbesimg.com/kellyclay/files/2013/12/glass.jpg"
title="pic1"
>
<figcaption class="figuredetails">Fig1</figcaption>
</figure>
<figure
id="pic2"
class="pictures"
>
<img
alt="figure2"
src="http://glass-apps.org/wp-content/uploads/2013/06/google-glass1.jpg"
title="pic2"
>
<figcaption class="figuredetails">Fig2</figcaption>
</figure>
</section>
<section id="content">
<p>hello</p>
</section>
</body>
CSS:-
#CHARSET "UTF-8";
#pics{
width:100%;
padding: 50px 50px;
}
.pictures{
float: left;
width:200px;
height:200px;
box-shadow: 10px 10px 5px #888888;
}
.pictures img{
width:100%;
height:auto;
}
#pic1{
-ms-transform: rotate(30deg);
-webkit-transform: rotate(30deg);
transform: rotate(30deg);
z-index: -1
}
#pic2{
position: absolute;
-ms-transform: rotate(50deg);
-webkit-transform: rotate(50deg);
transform: rotate(50deg);
/* z-index: -2; */
}
#content{
clear: both;
}
.pictures > .figuredetails{
color: red;
padding-left: 20px;
}
.clearfix:after {
content: ".";
visibility: hidden;
display: block;
height: 0;
clear: both;
}
JQuery:
function pichoverfunc() {
$(this).css({"z-index":10});
}
function pichoverfuncO() {
$(this).css({"z-index":-10});
}
$(document).ready(
$("#pic2").hover(pichoverfunc, pichoverfuncO)
);
I'm trying to do something like this:-
Show 2 rotated images on the top of each other.
When hovered above any image (even near its egde), that image should come to the front and the one that is in front should go to back
This is a future things (in my to-do list) - Use more than 2 images to achieve the same functionality as in step 2.
The problem:
1. I cant hover on the second image
2. (This is linked to the requirement 3 above) If there are more than 2 images, then, how should I choose z-index for each image that is in the back?
What I've tried:-
I've used the Dev tools in chrome to inspect the #pic2 but, I still cant select it.
As I'm new to HTML, CSS, and Jquery, Any help would be great.

You dont need to use Jquery to change an element on hover. CSS has this functionality built in, take a look at this link. As you can see you can set a css class or id to change on hover. So for instance:
#pic2{
position: absolute;
-ms-transform: rotate(50deg);
-webkit-transform: rotate(50deg);
transform: rotate(50deg);
/* z-index: -2; */
}
Then below that you could put somthing like this:
#pic2:hover{
z-index:10;
}
This should change the z-index of pic2 on hover with only CSS, also if you want to do this with many images try using a class instead of an id or maybe just do it using tag name. So for instance assign class="img-hover" to all the images youd like. Then in your css put:
.img-hover:hover{
z-index:10;
}
or if you want to just apply the hover to all img tags youd just put:
img:hover{
...
}

The root cause why your script does not work is probably the fact that:
z-index will only work on an element whose position property has been explicitly set to absolute, fixed, or relative.
Read more on the z-index: http://www.smashingmagazine.com/2009/09/15/the-z-index-css-property-a-comprehensive-look/
When it comes to your JSFiddle, I cleaned it up a bit and simplified it a bit - http://jsfiddle.net/E4s9k/
HTML:
<body>
<img
id="pic1"
alt="figure1"
src="http://b-i.forbesimg.com/kellyclay/files/2013/12/glass.jpg"
title="pic1"
>
<img
id="pic2"
alt="figure2"
src="http://glass-apps.org/wp-content/uploads/2013/06/google-glass1.jpg"
title="pic2"
>
</body>
JS:
function handlerIn() {
$('img').css({"z-index": -10}); //Push all images back
$(this).css({"z-index": 10}); //Bring our target to front
}
function handlerOut() {
$('img').css({"z-index": 10}); //Bring all our images to front
$(this).css({"z-index": -10}); //Push target back
}
$(document).ready(function(){
$("img").hover(handlerIn, handlerOut);
});
CSS:
img {
position: relative;
width:200px;
height:200px;
box-shadow: 10px 10px 5px #888888;
}
#pic1{
-ms-transform: rotate(30deg);
-webkit-transform: rotate(30deg);
transform: rotate(30deg);
}
#pic2{
-ms-transform: rotate(50deg);
-webkit-transform: rotate(50deg);
transform: rotate(50deg);
}

Categories