Mon, 2010-07-19 22:35
I am new to this forum and new to CSS. I have some experience HTML coding but have never used CSS. I would appreciate someone helping me figure this out.
I have a web cam that streams to the internet. I need to rotate the display of the video 90 degrees clockwise. I have searched Google to find options. All have failed. I saw an article about using CSS to rotate text and images so I thought I would see if that would work. I emailed the author but he was unwilling to help but he did send me the code below. Can anyone help me about inserting the code below to see if it will work on the web page I link to above? Any help is deeply appreciated. Here is the code.
<div class="rotateme"> /* play your video here */ </div> and the css: .rotateme { -webkit-transform: rotate(-90deg); -moz-transform: rotate(-90deg); transform: rotate(-90deg); filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=3); }
Mon, 2010-07-19 23:09
#1
What's to help with? Put your
What's to help with?
Put your video player code into the div.
If this doesn't work, then please provide a live example.
Tue, 2010-07-20 00:44
#2
Live Example
Remember I told you I have no CSS experience. But I did as you said and I put the code in. Obviously I am missing something. Here's my live example.
<a href="http://jreece.com/doggiecam/index-test.htm" rel="nofollow">http://jreece.com/doggiecam/index-test.htm</a>
Tue, 2010-07-20 01:28
#3
Hi jereece, The CSS needs to
Hi jereece,
The CSS needs to go either in a separate file, linked in the head of your page or in style tags in the head of your page.
<html> <head> <style type="text/css"> .rotateme { -webkit-transform: rotate(-90deg); -moz-transform: rotate(-90deg); transform: rotate(-90deg); filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=3); } </style> </head>
http://www.w3schools.com/css/css_howto.asp
getting the cam to show is another matter.
Wed, 2010-07-21 01:59
#4
It appears this is rotating
It appears this is rotating the link HTML I entered not the video of the of the link. Any suggestions? I want to rotate the streaming video that the link displays. This is the original page and this is my work in progress.
As always I appreciate the help.
Jim
Wed, 2010-07-21 02:07
#5
This works on the original
This works on the original page.
.ninety{ -webkit-transform: rotate(-90deg); -moz-transform: rotate(-90deg); transform: rotate(-90deg); filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=3); }
Wed, 2010-07-21 03:17
#6
Aren't y'all turning the
Aren't y'all turning the wrong direction? Needs to be 90deg, not -90deg, right?
Also, I don't think transform will work on plug-ins, though it'll work for <img>. You need the html5 <video> element.
Wouldn't it be simpler to rotate the camera CCW 90deg?
cheers,
gary
Fri, 2010-07-23 15:40
#7
Tony - I tried your code and
Tony - I tried your code and I still get is the web address of my video instead of the video and it's not rotated at all. Could you take the code of my page, modify it where it works for you and send it to me via PM? Maybe I am just not doing something right and I have virtually no experience with CSS.
Gary.Turner...I think your are correct in that I need to rotate it clockwise. Thanks. However if I turn the camera then the video will not display the full length of the room. So I am afraid it's not that simple. I may ultimately have to do that and live with part of the room not covered but I was hoping to figure this out.
I continue to appreciate your help.
Jim
Sun, 2010-07-25 19:26
#8
Can anyone else help me use
Can anyone else help me use CSS to rotate my streaming video 90 degrees clockwise?
Thanks,
Jim