<!DOCTYPE html>
<!-- <copyright>
This file contains proprietary software owned by Motorola Mobility, Inc.<br/>
No rights, expressed or implied, whatsoever to this software are provided by Motorola Mobility, Inc. hereunder.<br/>
(c) Copyright 2011 Motorola Mobility, Inc. All Rights Reserved.
</copyright> -->
<html>
<head>
<script type="text/montage-serialization">
{
"owner": {
"module": "montage/ui/image3d.reel",
"name": "Image3D",
"properties": {
"element": {"#": "Image3D"},
"left": {"#": "left"},
"right": {"#": "right"}
}
}
}
</script>
</head>
<style>
.Image3D {
width: 320px;
height: 320px;
-webkit-transform-style: preserve-3d;
-webkit-backface-visibility: hidden;
}
.Image3D .left {
position: absolute;
width: 320px;
height: 30px;
-webkit-transform-origin: 0 0 0;
-webkit-transform: translate3d(0.5px, 320px, -30px) rotateY(-90deg) rotateZ(-90deg);
line-height: 30px;
font-size: 14px;
font-family: Helvetica, Arial, sans-serif;
text-align: center;
color: white;
background: black;
-webkit-backface-visibility: hidden;
}
.Image3D .right {
position: absolute;
width: 320px;
height: 30px;
-webkit-transform-origin: 0 0 0;
-webkit-transform: translate3d(319.5px, 320px, 0) rotateY(90deg) rotateZ(-90deg);
line-height: 30px;
font-size: 14px;
font-family: Helvetica, Arial, sans-serif;
text-align: center;
color: white;
background: black;
-webkit-backface-visibility: hidden;
}
.Image3D .top {
position: absolute;
width: 320px;
height: 30px;
-webkit-transform-origin: 0 0 0;
-webkit-transform: translate3d(0, .5px, -30px) rotateX(90deg);
background: #444;
-webkit-backface-visibility: hidden;
}
.Image3D .bottom {
position: absolute;
width: 320px;
height: 30px;
-webkit-transform-origin: 0 0 0;
-webkit-transform: translate3d(0, 319.5px, 0) rotateX(-90deg);
background: #444;
-webkit-backface-visibility: hidden;
}
.Image3D .back {
position: absolute;
width: 320px;
height: 320px;
background: inherit;
-webkit-transform-origin: 0 0 0;
-webkit-transform: translate3d(320px, 0, -30px) rotateY(-180deg);
-webkit-backface-visibility: hidden;
}
</style>
<body>
<div id="Image3D" class="Image3D">
<div id="left" class="left"></div>
<div id="right" class="right"></div>
<div class="top"></div>
<div class="bottom"></div>
<div id="back" class="back"></div>
</div>
</body>
</html>