Using the CSS transform() property (and the -moz-, -webkit-, etc verisons), it's easy to rotate an HTML 5 video:
video {
transform:rotate(90deg);
}
However, this rotates the controls along with the video. Is there any way to keep the video itself rotated without also rotating the controls?
Ok I see, you're using the native video controls. What you'll need to do is build custom controls if you want to style them separately. Here's a good tutorial on how to do that http://blog.teamtreehouse.com/building-custom-controls-for-html5-videos. Hope this helps
Ok, For next rotate control.
Add this in Css:
video::-webkit-media-controls {
transform: scale(-1, 1);
-webkit-transform:scale(-1, 1); /* Safari and Chrome */
-moz-transform:scale(-1, 1); /* Firefox */
}
video::-webkit-media-controls-enclosure {
transform: scale(-1, 1);
-webkit-transform:scale(-1, 1); /* Safari and Chrome */
-moz-transform:scale(-1, 1); /* Firefox */
}
Related
I want to apply mirror effect on my HTML 5 Video. I did this by applying this CSS
transform: scale(-1, 1);
filter: FlipH;
It's working on desktop and web, but it's not working on mobiles (when we enter into full screen).
According to #PhonicUK in this question
here's the solution most used browsers:
#videoElement
{
transform: rotateY(180deg);
-webkit-transform:rotateY(180deg); /* Safari and Chrome */
-moz-transform:rotateY(180deg); /* Firefox */
}
You can use rotateY property instead of scale for this:
transform:rotateY(180deg);
I think you should make it compatible for all web browsers. Try something like this:
-moz-transform: scale(-1, 1);
-webkit-transform: scale(-1, 1); -o-transform: scale(-1, 1);
transform: scale(-1, 1); filter: FlipH;
See filter property compatibilities: https://caniuse.com/#feat=css-filters
If you’re able to then you should flip the actual source video and save a new version rather than trying this in code. I don’t know what performance hit this has for mobiles and I think full screen mode is ‘outside’ the browser’s context and varies per device. If you can’t edit the source video then heopfully the other answer can help.
My goal is to increase the size of the checkboxes, cross-browser. I have accomplished this goal in Internet Explorer, Firefox, and Chrome by using the browser prefixes (-moz-, -ms-, etc.) with this:
input[type=checkbox]
{
/* Double-sized Checkboxes */
-ms-transform: scale(2.1, 2.1); /* IE */
-moz-transform: scale(2.1, 2.1); /* FF */
-webkit-transform: scale(2.1, 2.1); /* Safari and Chrome */
-o-transform: scale(2.1, 2.1); /* Opera */
}
It is not working in Safari (and Opera, but I'm more focused on Safari). I have version 5.7.1 and I am accessing it from a windows desktop.
However, I was playing around with this jsfiddle and noticed that the scale works on divs:
http://jsfiddle.net/webvitaly/KKVXB/
I stripped out the code to get the minimum that will still get the desired result:
<div class="matrix3d"></div>
<input type="checkbox" name="opt1" id="option1" />
input[type=checkbox] {
-webkit-transform: scale(3,3); /* safari and chrome */
}
.matrix3d {
-webkit-transform: matrix3d(1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1); /* safari and chrome */
}
Here's the jsfiddle for it: http://jsfiddle.net/3xr7Q/
The checkbox is larger as expected, but as soon as I took out the 'matrix3d' class or alter the 'matrix3d' html or css in any way, the checkbox goes back to its normal size.
Does anyone know why it works with the 'matrix3d' class and how I can accomplish the goal without it, preferably by not editing the HTML? I do not want to just add an extra 'matrix3d' div next to my checkbox because I don't know why it affects the checkbox.
Edit: Also, something I notice is if I refresh the page, it flashes to the big size before going back to the small size. Also, it would nice to figure out it on Windows, but if someone says it works on a Mac or iphone, that might be OK.
Input elements are inline not block level elements, and webkit has historically not supported transforms on inline elements.
One way to fix this is to add a display: inline-block to the input's CSS. I'm not an a Mac right now, so can't check this.
I am trying to rotate the label on my X-Axis on my flot graph in a similar way a user asked here - Rotate Flot Tick Labels
The problem I am facing is that it looks like the CSS selector for the X-Axis doesn't select anything. The selector I am using is:
div.xAxis div.tickLabel
{
transform: rotate(-90deg);
-ms-transform:rotate(-90deg); /* IE 9 */
-moz-transform:rotate(-90deg); /* Firefox */
-webkit-transform:rotate(-90deg); /* Safari and Chrome */
-o-transform:rotate(-90deg); /* Opera */
/*rotation-point:50% 50%;*/ /* CSS3 */
/*rotation:270deg;*/ /* CSS3 */
}
I also don't even understand how the graph is even visible. I don't know much about the canvas tag, but it looks like it is completely empty.
I don't understand how the source there is empty. I would think there would be some sort of markup like vector points that represent the graph. Is that just how canvas works? Also, how would you even know what CSS selectors to use at that point if you can't view the source?
You are probably using the canvas plugin, and setting canvas: true in your options. That forces flot to draw the labels on the canvas, rather than putting them where you are expecting (in the divs).
I have a web page built in ASP.NET MVC that uses fixed positioning to allow users to always see the row headers when scrolling.
When using Internet Explorer 9 the fixed elements disappear and reappear from view when scrolling. I have tested in Chrome and it works correctly there. I have also made sure that IE is using standards mode and not quirks.
This jsfiddle demonstrates my problems: http://jsfiddle.net/zache/43zCf/
Doesn't fit the character limit.
The parents of the z-indexed elements are not positionned.
You have to add to table position: inherit;
so the css for table will be :
table {
position: inherit;
white-space: nowrap;
border-collapse: collapse;
}
This worked for me.
Solution 1:
Add scrollbars on page load then remove them a short time after.
Sys.Application.add_load(function(){
if ($.browser.version == 9 && $.browser.msie) {
$('html').css('overflow-y','scroll');
setTimeout(function () {
$('html').css('overflow-y','auto');
}, 10);
}
})();
Solution 2
Set document mode to ie8 in web.config:
<add name="X-UA-Compatible" value="IE=8"/>
I was having the same issue, I was able to fix it by adding the following transform code to the fixed position element, (transform: translateZ(0);-webkit-transform: translateZ(0);) that forces the browser to use hardware acceleration to access the device’s graphical processing unit (GPU) to make pixels fly. Web applications, on the other hand, run in the context of the browser, which lets the software do most (if not all) of the rendering, resulting in less horsepower for transitions. But the Web has been catching up, and most browser vendors now provide graphical hardware acceleration by means of particular CSS rules.
Using -webkit-transform: translate3d(0,0,0); will kick the GPU into action for the CSS transitions, making them smoother (higher FPS).
Note: translate3d(0,0,0) does nothing in terms of what you see. it moves the object by 0px in x,y and z axis. It's only a technique to force the hardware acceleration.
#element {
position: fixed;
/* MAGIC HAPPENS HERE */
transform: translateZ(0);
-moz-transform: translatez(0);
-ms-transform: translatez(0);
-o-transform: translatez(0);
-webkit-transform: translateZ(0);
-webkit-font-smoothing: antialiased; /* seems to do the same in Safari Family of Browsers*/
}
I would like to know whether it is possible or not to create text in a web page at an angle, for example at 40 Degrees. If it is possible, how can I do this?
EDIT: Finally, I decided to go with Mathias Bynens's answer.
Use CSS3 transforms:
.selector {
-webkit-transform: rotate(40deg);
-moz-transform: rotate(40deg);
-o-transform: rotate(40deg);
transform: rotate(40deg);
}
IE does support filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=3);, where the rotation property accepts one of four values: 0, 1, 2, or 3 which will rotate the element 0, 90, 180 or 270 degrees respectively. It’s a filter though, so I wouldn’t recommended using it.
To add to Mathias' answer, you can rotate text in IE, too: http://snook.ca/archives/html_and_css/css-text-rotation
However, you are bound to multiples of 90°.
Apart from that you could utilize SVG/VML for rotated text. Look, for example, at this page: http://raphaeljs.com/text-rotation.html
It uses the RaphaelJS library for cross browser text rotation without images.
Mathias is right in his answer, but to also support IE you can use their filter:
filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=3);
/*play with the number to get it right*/
Then IE will be supported too :)