@qooxdoo/framework
Version:
The JS Framework for Coders
163 lines (145 loc) • 4.38 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">
body {
padding-left: 20px;
}
h1 {
font-family: Verdana;
clear: both;
}
.box {
border-top-left-radius: 3px;
border-top-right-radius: 3px;
border-bottom-left-radius: 3px;
border-bottom-right-radius: 3px;
border-top: 1px solid #BBB;
border-right: 1px solid #BBB;
border-bottom: 1px solid #BBB;
border-left: 1px solid #BBB;
background-color: #F9F9F9;
padding: 15px;
margin-right: 20px;
margin-top: 10px;
margin-bottom: 10px;
float: left;
text-align: center;
}
.innerbox {
background-color: #bbb;
}
.orig {
border-top-left-radius: 3px;
border-top-right-radius: 3px;
border-bottom-left-radius: 3px;
border-bottom-right-radius: 3px;
border : 1px dashed blue;
color: white;
padding: 15px;
margin-right: 20px;
margin-top: 10px;
margin-bottom: 10px;
float: left;
text-align: center;
}
.container {
position: absolute;
}
.row {
padding-left: 30px;
height: 70px;
}
body {
margin: 20px;
}
</style>
</head>
<body>
<h1>Transform Functions</h1>
<div class="row">
<div class="container">
<div class="orig">Scale</div>
<div class="orig">Translate</div>
<div class="orig">Rotate</div>
<div class="orig">Skew</div>
<div class="orig">Combination</div>
</div>
<div class="container">
<div id="scale" class="box">Scale</div>
<div id="translate" class="box">Translate</div>
<div id="rotate" class="box">Rotate</div>
<div id="skew" class="box">Skew</div>
<div id="combo" class="box">Combination</div>
</div>
</div>
<h1>Transform Origin</h1>
<div class="row">
<div class="container">
<div class="orig">center</div>
<div class="orig">left bottom</div>
<div class="orig">right top</div>
</div>
<div class="container">
<div id="origin-c" class="box">center</div>
<div id="origin-lb" class="box">left bottom</div>
<div id="origin-rt" class="box">right top</div>
</div>
</div>
<div id="3dpart">
<h1>Transform Style</h1>
<div class="row">
<div class="container">
<div class="orig">flat</div>
<div class="orig">preserve-3d</div>
</div>
<div class="container">
<div id="flat" class="box"><div class="innerbox">flat</div></div>
<div id="3d" class="box"><div class="innerbox">preserve-3d</div></div>
</div>
</div>
<h1>Perspective</h1>
<div class="row">
<div class="container">
<div class="orig">10</div>
<div class="orig">100</div>
<div class="orig">500</div>
<div class="orig">1000</div>
</div>
<div class="container">
<div id="perspective30" style="float: left"><div class="box">30</div></div>
<div id="perspective100" style="float: left"><div class="box">100</div></div>
<div id="perspective500" style="float: left"><div class="box">500</div></div>
<div id="perspective1000" style="float: left"><div class="box">1000</div></div>
</div>
</div>
<h1>Perspective Origin</h1>
<div class="row">
<div class="container">
<div class="orig">center</div>
<div class="orig">bottom left</div>
<div class="orig">bottom right</div>
</div>
<div class="container">
<div id="perorig-c" style="float: left"><div class="box">center</div></div>
<div id="perorig-bl" style="float: left"><div class="box">bottom left</div></div>
<div id="perorig-br" style="float: left"><div class="box">bottom right</div></div>
</div>
</div>
<h1>Backface Visibility</h1>
<div class="row">
<div class="container">
<div class="orig">visible</div>
<div class="orig">hidden</div>
</div>
<div class="container">
<div id="visible" class="box">visible</div>
<div id="hidden" class="box">hidden</div>
</div>
</div>
</div>
</body>
</html>