mirror of
https://github.com/servo/servo.git
synced 2025-06-13 10:54:29 +00:00
f47ba6fd33
* Add parser support for 3d transforms. * Change ComputedMatrix to a representation that suits interpolation. * Switch stacking contexts to use 4x4 matrices. The transforms themselves are still converted to 2d and handled by azure for now, but this is a small standalone part that can be landed now to make it easier to review.
122 lines
2.8 KiB
HTML
122 lines
2.8 KiB
HTML
<!DOCTYPE html>
|
|
<html>
|
|
<head>
|
|
<style type="text/css">
|
|
#div_t3d_1 {
|
|
position: absolute;
|
|
background-color: red;
|
|
top: 10px;
|
|
left: 10px;
|
|
width: 40px;
|
|
height: 40px;
|
|
}
|
|
|
|
#div_t3d_2 {
|
|
position: absolute;
|
|
background-color: green;
|
|
top: 20px;
|
|
left: 20px;
|
|
width: 20px;
|
|
height: 20px;
|
|
}
|
|
|
|
#div_t3d_3 {
|
|
position: absolute;
|
|
background-color: red;
|
|
top: 10px;
|
|
left: 60px;
|
|
width: 40px;
|
|
height: 40px;
|
|
}
|
|
|
|
#div_t3d_4 {
|
|
position: absolute;
|
|
background-color: green;
|
|
top: 20px;
|
|
left: 5px;
|
|
width: 20px;
|
|
height: 20px;
|
|
}
|
|
|
|
#div_s3d_1 {
|
|
position: absolute;
|
|
background-color: red;
|
|
top: 10px;
|
|
left: 110px;
|
|
width: 40px;
|
|
height: 40px;
|
|
}
|
|
|
|
#div_s3d_2 {
|
|
position: absolute;
|
|
background-color: green;
|
|
top: 0;
|
|
left: 15px;
|
|
width: 10px;
|
|
height: 40px;
|
|
}
|
|
|
|
#div_r3d_1 {
|
|
position: absolute;
|
|
background-color: red;
|
|
top: 60px;
|
|
left: 10px;
|
|
width: 40px;
|
|
height: 40px;
|
|
}
|
|
|
|
#div_r3d_2 {
|
|
position: absolute;
|
|
background-color: green;
|
|
top: 15px;
|
|
left: 5px;
|
|
width: 20px;
|
|
height: 10px;
|
|
}
|
|
|
|
#div_r3d_3 {
|
|
position: absolute;
|
|
background-color: red;
|
|
top: 60px;
|
|
left: 60px;
|
|
width: 40px;
|
|
height: 40px;
|
|
}
|
|
|
|
#div_r3d_4 {
|
|
position: absolute;
|
|
background-color: green;
|
|
top: 15px;
|
|
left: 5px;
|
|
width: 20px;
|
|
height: 10px;
|
|
}
|
|
</style>
|
|
</head>
|
|
<body>
|
|
<div id="div_t3d_1">
|
|
<div id="div_t3d_2">
|
|
</div>
|
|
</div>
|
|
|
|
<div id="div_t3d_3">
|
|
<div id="div_t3d_4">
|
|
</div>
|
|
</div>
|
|
|
|
<div id="div_s3d_1">
|
|
<div id="div_s3d_2">
|
|
</div>
|
|
</div>
|
|
|
|
<div id="div_r3d_1">
|
|
<div id="div_r3d_2">
|
|
</div>
|
|
</div>
|
|
|
|
<div id="div_r3d_3">
|
|
<div id="div_r3d_4">
|
|
</div>
|
|
</div>
|
|
</body>
|
|
</html>
|