Is that possible to make a video inside tag mirrored horizontally or vertically?
You can do it using a CSS3 3D transformation.
#videoElement
{
transform: rotateY(180deg);
-webkit-transform:rotateY(180deg); /* Safari and Chrome */
-moz-transform:rotateY(180deg); /* Firefox */
}
This will rotate it 180 degrees around its Y axis (so you're now looking at it from behind) which gives the same appearance as being mirrored.
Example at http://jsfiddle.net/DuT9U/1/
You can use CSS3 scaleX or scaleY set to -1 to respectively flip the video horizontally or vertically.
Using JavaScript, if video is the video element, to mirror (flip horizontally) you can use
video.style.cssText = "-moz-transform: scale(-1, 1); \
-webkit-transform: scale(-1, 1); -o-transform: scale(-1, 1); \
transform: scale(-1, 1); filter: FlipH;";
To flip vertically you can use
video.style.cssText = "-moz-transform: scale(1, -1); \
-webkit-transform: scale(1, -1); -o-transform: scale(1, -1); \
transform: scale(1, -1); filter: FlipV;";
By any chance if somebody wants a working example, here is the code (with mirrored/rotated). Refer the video element #videoElement under style tag:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta content="stuff, to, help, search, engines, not" name="keywords">
<meta content="What this page is about." name="description">
<meta content="Display Webcam Stream" name="title">
<title>Display Webcam Stream</title>
<style>
#container {
margin: 0px auto;
width: 500px;
height: 375px;
border: 10px #333 solid;
}
#videoElement {
width: 500px;
height: 375px;
background-color: #666;
/*Mirror code starts*/
transform: rotateY(180deg);
-webkit-transform:rotateY(180deg); /* Safari and Chrome */
-moz-transform:rotateY(180deg); /* Firefox */
/*Mirror code ends*/
}
</style>
</head>
<body>
<div id="container">
<video autoplay="true" id="videoElement">
</video>
</div>
<script>
var video = document.querySelector("#videoElement");
navigator.getUserMedia = navigator.getUserMedia || navigator.webkitGetUserMedia || navigator.mozGetUserMedia || navigator.msGetUserMedia || navigator.oGetUserMedia;
if (navigator.getUserMedia) {
navigator.getUserMedia({video: true}, handleVideo, videoError);
}
function handleVideo(stream) {
video.src = window.URL.createObjectURL(stream);
}
function videoError(e) {
// do something
}
</script>
</body>
</html>
to prevent rotating controls
video {
transform: scale(-1,1);
}
video::-webkit-media-controls-panel {
transform: scale(-1,1);
}
Related
I have some HTML5/CSS3 code, in which I want to float the #rightodwnblock image right. I have added the float: right property to the code but for some reason the image still floats to the left. I can see nothing within the code that would cause this to happen, so I'm wondering if the issue might be server-side? It's up for testing here:
http://www.orderofthemouse.co.uk/JavascriptTesting4Client/index.html
The in-progress code is shown below:
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" >
<link rel="stylesheet" type="text/css" href="/style.css" />
<title>The End.</title>
<style style="text/css">
.marquee {
height: 1024px;
overflow: hidden;
position: relative;
}
.marquee p {
position: absolute;
width: 100%;
height: 100%;
margin: 0;
line-height: 50px;
text-align: center;
font:120pt Verdana,Arial;
/* Starting position */
-moz-transform:translateY(100%);
-webkit-transform:translateY(100%);
transform:translateY(100%);
/* Apply animation to this element */
-moz-animation: scroll-up 20s linear infinite;
-webkit-animation: scroll-up 20s linear infinite;
animation: scroll-up 20s linear infinite;
}
/* Move it (define the animation) */
#-moz-keyframes scroll-up {
0% { -moz-transform: translateY(100%); }
100% { -moz-transform: translateY(-100%); }
}
#-webkit-keyframes scroll-up {
0% { -webkit-transform: translateY(100%); }
100% { -webkit-transform: translateY(-100%); }
}
#keyframes scroll-up {
0% {
-moz-transform: translateY(100%); /* Browser bug fix */
-webkit-transform: translateY(100%); /* Browser bug fix */
transform: translateY(100%);
}
100% {
-moz-transform: translateY(-100%); /* Browser bug fix */
-webkit-transform: translateY(-100%); /* Browser bug fix */
transform: translateY(-100%);
}
#rightodwnblock {
top: 100px;
float: right;
}
</style>
</head>
<body>
<audio autoplay>
<source src="<!--#exec cmd="/web/stuff/bin/randfile \*.mp3 music/mp3" -->" type="audio/mpeg" autoplay="autoplay" preload="auto" />
<source src="<!--#exec cmd="/web/stuff/bin/randfile \*.ogg music/ogg" -->" type="audio/ogg" autoplay="autoplay" preload="auto" />
<redacted>
</audio>
<div class="marquee">
<p>Blackness.</p>
</div>
<img id=”rightodwnblock” height=”100px” width=”100px” src="littlelogo.png" title="Do Not Click Here" alt="Do Not Click Here"></div>
</body>
</html>
Update: I have added a float-right class to the code, so the img tag properties read as follows:
<img class="float-right submit-button" id="rightodwnblock" height="100px" width="100px" src="littlelogo.png" title="Do Not Click Here" alt="Do Not Click Here"></div>
This hasn't helped either. The revised code has been uploaded to the server.
Update 2: I have altered the quote tags as suggested in one of the answers below and updated the code above to reflect this change. It hasn't solved the original issue.
Your problem appears to be that your text editor is not inserting quotation marks in a web-standard format.
So instead of this:
<img id=”rightodwnblock” ...></div>
Which the browser interprets as this:
<img id="”rightodwnblock”" ...></div>
When you should be using this:
<img id="rightodwnblock" ...></div>
Another problem is that you have not "ended" your css blocks; you are missing a } at the end right here:
#keyframes scroll-up {
0% {
-moz-transform: translateY(100%); /* Browser bug fix */
-webkit-transform: translateY(100%); /* Browser bug fix */
transform: translateY(100%);
}
100% {
-moz-transform: translateY(-100%); /* Browser bug fix */
-webkit-transform: translateY(-100%); /* Browser bug fix */
transform: translateY(-100%);
}
} /* <-- RIGHT HERE */
#rightodwnblock {
top: 100px;
float: right;
}
This caused the #rightodwnblock style to be ignored by the browser.
What are you using for a text editor? It looks like your code is using 'smart quotes' in certain places, such as the ID, height, and width attributes on the img tag. The smart quotes are causing the ID attribute to be declared as id=""rightodwnblock"".
If you are using something like TextEdit to edit your code you want to ensure you have it set to edit in plain text instead of rich text, as rich text editors will sometimes replace standard quotes with smart quotes.
I'm just free styling right now. I downloaded a free HTML editor and just playing around. What I'm really trying to do is add a picture and rotate it to the right by 30 degrees, add a round corner by 45px, and blue shadow by 20px.
This is what I have so far, again I'm just free styling. I'm not sure if I'm doing this right. This is my first time playing with HTML...
Author: ...
Date: 04/15/2014
Filename: t78.htm
Supporting files: torte.jpg
-->
<TITLE> ...???... </TITLE>
<META NAME="Generator" CONTENT="EditPlus">
<META NAME="Author" CONTENT="">
<META NAME="Keywords" CONTENT="">
<META NAME="Description" CONTENT="">
<img src="torte.jpg" data-rotate="90">
<img src="torte.jpg" data-rotate="45">
<img src="torte.jpg">
Check this out jsfiddle. hope this helps.
add this to your CSS for image rotation
/* Firefox */
-moz-transform:rotate(90deg);
/* Safari and Chrome */
-webkit-transform:rotate(90deg);
/* Opera */
-o-transform:rotate(90deg);
/* IE9 */
-ms-transform:rotate(90deg);
and this to your CSS for radius and shadow
border-radius:45px;
box-shadow: 0 0 20px rgba(0, 0, 0, 0.3);
see to rotate either u can use jquery or CSS..
lets see how to do it with CSS
check the link
--CSS--
img
{
display:block;
margin:100px;
/*set the radius as u want*/
border-radius:45px;
/*set the shadow u want*/
box-shadow:10px 10px 20px blue;
}
-- declare a css class to rotate 30 degree clockwise..
.clock30
{
-webkit-transform: rotate(30deg);
-moz-transform: rotate(30deg);
-o-transform: rotate(30deg);
-ms-transform: rotate(30deg);
transform: rotate(30deg);
}
check the link you will know how to use it
http://jsfiddle.net/g7FtY/2/
hello you can use CSS to achieve the rotate style.
<img class="rotate" img src="torte.jpg" />
<style>
.rotate {
/* 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);
}
</style>
After looking through IE10's developer blog I have found that they do not support the preserve-3d setting.
I found this cube originally made by Paul Hayes which is working with touch screens and quite popular.
Altough preserve-3d setting is a known issue, I couldn't achieved suggested work around because it seems there is no transform property in the parent to maually apply to the child elements.
Here is the link that I simplified so far: http://jsfiddle.net/cC4Py/1/
CSS:
.viewport {
perspective: 800px;
perspective-origin: 50% 200px;
transform: scale(0.75,0.75);
-webkit-perspective: 800;
-webkit-perspective-origin: 50% 200px;
-webkit-transform: scale(0.75,0.75);
-moz-perspective: 800;
-moz-perspective-origin: 50% 200px;
-moz-transform: scale(0.75,0.75);
}
.cube {
position: relative;
margin: 0 auto;
height: 400px;
width: 400px;
transition: transform 50ms linear;
transform-style: preserve-3d;
-webkit-transition: -webkit-transform 50ms linear;
-webkit-transform-style: preserve-3d;
-moz-transition: -moz-transform 50ms linear;
-moz-transform-style: preserve-3d;
}
.cube > div {
position: absolute;
height: 360px;
width: 360px;
padding: 20px;
background-color: rgba(50, 50, 50, 1);
font-size: 1em;
line-height: 1em;
color: #fff;
border: 1px solid #555;
border-radius: 3px;
transition: -webkit-transform 50ms linear;
}
.cube > div:first-child {
transform: rotateX(90deg) translateZ(200px);
-webkit-transform: rotateX(90deg) translateZ(200px);
-moz-transform: rotateX(90deg) translateZ(200px);
}
.cube > div:nth-child(2) {
transform: translateZ(200px);
-webkit-transform: translateZ(200px);
-moz-transform: translateZ(200px);
}
.cube > div:nth-child(3) {
transform: rotateY(90deg) translateZ(200px);
-webkit-transform: rotateY(90deg) translateZ(200px);
-moz-transform: rotateY(90deg) translateZ(200px);
text-align: center;
}
.cube > div:nth-child(4) {
transform: rotateY(180deg) translateZ(200px);
-webkit-transform: rotateY(180deg) translateZ(200px);
-moz-transform: rotateY(180deg) translateZ(200px);
}
.cube > div:nth-child(5) {
transform: rotateY(-90deg) translateZ(200px);
-webkit-transform: rotateY(-90deg) translateZ(200px);
-moz-transform: rotateY(-90deg) translateZ(200px);
}
.cube > div:nth-child(5) p {
text-align: center;
font-size: 2.77em;
margin: 40px;
line-height: 60px;
}
.cube > div:nth-child(6) {
transform: rotateX(-90deg) rotate(180deg) translateZ(200px);
-webkit-transform: rotateX(-90deg) rotate(180deg) translateZ(200px);
-moz-transform: rotateX(-90deg) rotate(180deg) translateZ(200px);
}
object {
opacity: 0.9;
}
object:hover {
opacity: 1;
}
HTML:
<body class="experiment">
<div class="viewport">
<section class="cube" style="transition: 500ms; -webkit-transition: 500ms;">
<div>MELABA!</div>
<div>
<h2>3D cube</h2>
<time>28th September 2010</time>
<p>By Paul Hayes</p>
<p>3D cube built using css, webkit-perspective and webkit-transform. Rotation via webkit-transition.</p>
<p>Use arrow keys to navigate, or click and hold mouse. On touch screens, use one finger to rotate. Press ESC to reset.</p>
<p>Read more »</p>
</div>
<div>
<object width="360" height="360"><param name="movie" value="http://www.youtube.com/v/MY5PkidV1cM?fs=1&hl=en_GB&rel=0"><param name="allowFullScreen" value="true"><param name="allowscriptaccess" value="always"><embed src="http://www.youtube.com/v/MY5PkidV1cM?fs=1&hl=en_GB&rel=0" type="application/x-shockwave-flash" allowscriptaccess="always" allowfullscreen="true" width="360" height="360">
</object>
</div>
<div>
<h2>Learn how to make a cube</h2>
<time>17th July 2009</time>
<p>By Paul Hayes</p>
<p>“A 3D cube can be created solely in CSS, with all six faces.”</p>
<p>Article: Cube explanation</p>
</div>
<div>
<p>I design and build websites in Brighton</p>
</div>
<div>
<small>Nothing down here.</small>
</div>
</section>
</div>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js"></script>
<script src="http://www.paulrhayes.com/experiments/cube-3d/js/experiment.js?13"></script>
</body>
I created copies of every property without -webkit- prefix. Am I doing anything wrong? What should I do next?
First of all, dragging and interaction in general usually means JavaScript. Yes, there are CSS hacks and I've used and abused them myself, but in this case it would be absolutely insane not to use JS.
So that means that you need to chain all the transforms from the ancestors (that means the rotation of the cube itself and the perspective you'd normally set on the parent of the cube) onto the faces of the cube via JavaScript.
You can do this in a few ways. In this case, I've used the style property of the face element, but you can also insert the styles into a style element.
Anyway...
demo
Relevant HTML:
<div class='cube'>
<div class='face'></div>
<!-- five more faces -->
</div>
Relevant CSS:
Since I'll be changing transform values via JS, I didn't bother setting them in the CSS.
.cube, .cube * {
position: absolute;
top: 50%; left: 50%;
}
.face {
margin: -8em;
width: 16em; height: 16em;
}
JS:
The code below is quick and dirty and can be improved.
var faces = document.querySelectorAll('.face'),
n = faces.length,
styles = [],
_style = getComputedStyle(faces[0]),
factor = 3,
side = parseInt(_style.width.split('px')[0], 10),
max_amount = factor*side,
unit = 360/max_amount,
flag = false,
tmp, p = 'perspective(32em) ';
for(var i = 0; i < n; i++) {
tmp = ((i < 4) ? 'rotateY(' + i*90 + 'deg)' :
'rotateX(' + Math.pow(-1, i)*90 + 'deg)') +
' translateZ(' + side/2 + 'px)';
faces[i].style.transform = p + tmp;
faces[i].style['-webkit-transform'] = p + tmp;
styles.push(tmp);
}
var drag = function(e) {
var p1 = { 'x': e.clientX - p0.x, 'y': e.clientY - p0.y },
angle = {'x': -p1.y*unit, 'y': p1.x*unit};
for(var i = 0; i < n; i++) {
tmp = 'rotateX(' + angle.x + 'deg)' +
'rotateY(' + angle.y + 'deg)' + styles[i];
faces[i].style.transform = p + tmp;
faces[i].style['-webkit-transform'] = p + tmp;
}
};
window.addEventListener('mousedown', function(e) {
var t = e.target;
if(t.classList.contains('face')){
p0 = { 'x': e.clientX, 'y': e.clientY };
flag = true;
window.addEventListener('mousemove', drag, false);
}
else {
flag = false;
}
}, false);
window.addEventListener('mouseup', function(e) {
if(flag) {
for(var i = 0; i < n; i++) {
_style = faces[i].style;
tmp = _style.transform || _style['-webkit-transform'];
styles[i] = tmp.replace('perspective(32em) ', '');
}
}
flag = false;
window.removeEventListener('mousemove', drag, false);
}, false);
Personally, I prefer using CSS #keyframes, and setting up animations that way, to using JS. JS tends to introduce jank and freeze up pages. CSS, especially in Firefox, but also in Chrome, is very fast and smooth for 3d vizualization and animation. IE has a problem by not including preserve-3d. Until it does, I won't worry about whether things look as intended in IE. Just try to make sure there's an acceptibly graceful degredation if you have to support IE.
I've rotated a div, which looks fine and functions properly in Chrome & Firefox. However in IE (v9.0.8112.16421), the style & click event only appear to be applied to the area of the div which intersects with the position of the div before it was rotated.
Notice in my sample code, when you mouse over, the cursor is only displayed near the top of the div. Also notice nothing happens when you click the bottom of the div, but the event is fired when you click near the top.
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
<head>
<meta http-equiv="X-UA-Compatible" content="IE=8">
<style>
#myExpander
{
position:absolute;
padding: 5px;
top: 100px;
cursor: pointer;
border: 1px solid black;
-webkit-transform-origin: 0 0;
-moz-transform-origin: 0 0;
-ms-transform-origin: 0 0;
-webkit-transform: rotate(-90deg);
-moz-transform: rotate(-90deg);
-ms-transform: rotate(-90deg);
filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=3);
}
</style>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<script language="javascript" type="text/javascript">
$(document).ready(function () {
$("#myExpander").click(function () {
alert("Clicked");
});
});
</script>
</head>
<body>
<div id="myExpander">
click me
</div>
</body>
</html>
Can anybody shed some light on what I'm missing?
Edit (solution): Here's the final solution as per Posicoln answer below. Please notice the -X-transform-origin styles have changed as this solution displayed differently in Chrome & FF.
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
<head>
<meta http-equiv="X-UA-Compatible" content="IE=8">
<style>
#myExpanderOuter
{
position:absolute;
padding: 5px;
top: 100px;
height: 80px;
width: 31px;
margin: 0 0 0 0;
padding: 0 0 0 0;
cursor: pointer;
border: 1px solid black;
}
#myExpanderInner
{
height: 30px;
width: 79px;
text-align: center;
}
.rotated270degrees
{
-webkit-transform-origin: 40 40;
-moz-transform-origin: 40 40;
-ms-transform-origin: 0 0;
-webkit-transform: rotate(-90deg);
-moz-transform: rotate(-90deg);
-ms-transform: rotate(-90deg);
filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=3);
}
</style>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<script language="javascript" type="text/javascript">
$(document).ready(function () {
$("#myExpanderOuter").click(function () {
alert("Clicked");
});
});
</script>
</head>
<body>
<div id="myExpanderOuter">
<div id="myExpanderInner" class="rotated270degrees">
Click me
</div>
</div>
</body>
</html>
One solution could be to put the rotated div inside a normal div with the rotated dimensions and rotate that.
so
<div id="myExpander">
click me
</div>
would turn to
<div id="myExpanderContainer">
<div id="myExpander">
click me
</div>
</div>
and you could add to your CSS
#myExpanderContainer
{
width: ...px; //~12px depends on browser settings, a value which could be inherited
height: ...px; //depends on length of link,
cursor: pointer;
}
with your script as
$(document).ready(function () {
$("#myExpanderContainer").click(function () {
alert("Clicked");
});
});
However this would need javascript to set dimensions for different length texts, if the links are changing, or if they are static it would be fine.
This probably isn't the most elegant solution, but it would work
I have written below code. But now the requirement is that the image should be rotated 180 degrees. How can I achieve this?
#cell {
background-image: url("../images/logo.PNG");
background-attachment: fixed;
background-repeat: no-repeat;
background-position: 0px 250px;
background-color: #FFFFFF;
border-left: 2px;
}
HTML tag:
<td width="2%" id="cell"/>
One cross-browser solution is
#cell {
-webkit-transform: rotate(180deg); /* Chrome and other webkit browsers */
-moz-transform: rotate(180deg); /* FF */
-o-transform: rotate(180deg); /* Opera */
-ms-transform: rotate(180deg); /* IE9 */
transform: rotate(180deg); /* W3C compliant browsers */
/* IE8 and below */
filter: progid:DXImageTransform.Microsoft.Matrix(M11=-1, M12=0, M21=0, M22=-1, DX=0, DY=0, SizingMethod='auto expand');
}
Note, that for IE8 and below, the rotation center point is not located in the center of the image (as it happens with all other browsers). So, for IE8 and below, you need to play with negative margins (or paddings) to shift the image up and left.
The element needs to be blocked. Other units that can be used are:
180deg = .5turn = 3.14159rad = 200grad
If you don't have any text in the <td> you can use transform: rotate(180deg); on it. If you do have text, this will rotate the text too. To prevent that you can put a <div> inside the <td>, put the text inside that, and rotate that 180 degrees (which puts it upright again).
Demo: http://jsfiddle.net/ThinkingStiff/jBHRH/
HTML:
<table>
<tr><td width="20%" id="cell"><div>right-side up<div></td></tr>
</table>
CSS:
#cell {
background-image: url(http://thinkingstiff.com/images/matt.jpg);
background-repeat: no-repeat;
background-size: contain;
color: white;
height: 150px;
transform: rotate(180deg);
width: 100px;
}
#cell div {
transform: rotate(180deg);
}
Output:
You can also try this axial type rotation OR rotation on Z-axis.
.box {
background: url('http://aashish.coolpage.biz/img/about/7.jpg');
width: 200px;
height: 200px;
transition: transform .5s linear;
transform-style: preserve-3D;
}
.box:hover {
transform: rotateY(180deg);
}
<div class="box"></div>
You can use CSS3 for this, but there are some browser issues:
transform: rotate(180deg);
Also look here: CSS3 rotate alternative?