mirror of
https://github.com/servo/servo.git
synced 2025-06-19 14:48:59 +01: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.
127 lines
3.1 KiB
HTML
127 lines
3.1 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: 10px;
|
|
left: 10px;
|
|
width: 20px;
|
|
height: 20px;
|
|
transform: translate3d(50%, 50%, 0);
|
|
}
|
|
|
|
#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: 10px;
|
|
left: 10px;
|
|
width: 20px;
|
|
height: 20px;
|
|
transform: translate3d(-5px, 10px, 0);
|
|
}
|
|
|
|
#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: 10px;
|
|
left: 10px;
|
|
width: 20px;
|
|
height: 20px;
|
|
transform: scale3d(0.5, 2, 1);
|
|
}
|
|
|
|
#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: 10px;
|
|
left: 10px;
|
|
width: 10px;
|
|
height: 20px;
|
|
transform: rotateZ(90deg);
|
|
}
|
|
|
|
#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: 10px;
|
|
left: 10px;
|
|
width: 10px;
|
|
height: 20px;
|
|
transform: rotate3d(0, 0, 1, 90deg);
|
|
}
|
|
</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>
|