@qooxdoo/framework
Version:
The JS Framework for Coders
64 lines (57 loc) • 1.56 kB
HTML
<html>
<head>
<title>Animation demo</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<script type="text/javascript" src="../helper.js"></script>
<style type="text/css" media="screen">
#container {
position: relative;
height: 300px;
width: 300px;
margin: 50px 100px;
border: 1px dashed blue;
}
#parent {
width: 300px;
height: 300px;
background-color: #844BCA;
opacity: 0.5;
}
#parent > div {
position: absolute;
top: 40px;
left: 40px;
width: 200px;
height: 200px;
font-family: monospace;
font-size: 12pt;
}
#parent > :first-child {
background-color: #49DC93;
}
#parent > :last-child {
background-color: #FF6;
}
body {
margin: 20px;
}
</style>
</head>
<body>
<div id="container">
<div id="parent">
<div>transform: translateZ(-100px) rotateY(45deg);</div>
<div>transform: translateZ(50px) rotateX(20deg);</div>
</div>
</div>
<h1>Transform Style</h1>
<p>
This is a copy of the original
<a href="http://www.webkit.org/blog-files/3d-transforms/transform-style.html" target="_blank">webkit demo</a>,
using the qooxdoo API and with that, works cross browser if the CSS features are supported.<br>
It shows the effect of the <code>transform style</code> property. The default setting is <code>preserve-3d</code> while on hover, the
style will be changed to <code>flat</code>.
</p>
</body>
</html>