mirror of
https://github.com/servo/servo.git
synced 2025-08-09 07:25:35 +01:00
Implement enough of 3d transforms spec to run the CSS FPS demo.
This commit is contained in:
Glenn Watson
parent
d86c587925
commit
39ddbbb0e1
19 changed files with 894 additions and 145 deletions
131
tests/html/test_3d_transform_1.html
Normal file
131
tests/html/test_3d_transform_1.html
Normal file
|
|
@ -0,0 +1,131 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<style type="text/css">
|
||||
/* Shorthand classes for different perspective values */
|
||||
.pers250 {
|
||||
perspective: 250px;
|
||||
}
|
||||
.pers350 {
|
||||
perspective: 350px;
|
||||
}
|
||||
.pers500 {
|
||||
perspective: 500px;
|
||||
}
|
||||
|
||||
/* Define the container div, the cube div, and a generic face */
|
||||
.container {
|
||||
width: 200px;
|
||||
height: 200px;
|
||||
margin: 75px 0 0 75px;
|
||||
border: none;
|
||||
}
|
||||
.cube {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
backface-visibility: visible;
|
||||
perspective-origin: 150% 150%;
|
||||
transform-style: preserve-3d;
|
||||
}
|
||||
.face {
|
||||
display: block;
|
||||
position: absolute;
|
||||
width: 100px;
|
||||
height: 100px;
|
||||
border: none;
|
||||
line-height: 100px;
|
||||
font-family: sans-serif;
|
||||
font-size: 60px;
|
||||
color: white;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
/* Define each face based on direction */
|
||||
.front {
|
||||
background: rgba(0, 0, 0, 0.3);
|
||||
transform: translateZ(50px);
|
||||
}
|
||||
.back {
|
||||
background: rgba(0, 255, 0, 1);
|
||||
color: black;
|
||||
transform: rotateY(180deg) translateZ(50px);
|
||||
}
|
||||
.right {
|
||||
background: rgba(196, 0, 0, 0.7);
|
||||
transform: rotateY(90deg) translateZ(50px);
|
||||
}
|
||||
.left {
|
||||
background: rgba(0, 0, 196, 0.7);
|
||||
transform: rotateY(-90deg) translateZ(50px);
|
||||
}
|
||||
.top {
|
||||
background: rgba(196, 196, 0, 0.7);
|
||||
transform: rotateX(90deg) translateZ(50px);
|
||||
}
|
||||
.bottom {
|
||||
background: rgba(196, 0, 196, 0.7);
|
||||
transform: rotateX(-90deg) translateZ(50px);
|
||||
}
|
||||
|
||||
/* Make the table a little nicer */
|
||||
th, p, td {
|
||||
background-color: #EEEEEE;
|
||||
padding: 10px;
|
||||
font-family: sans-serif;
|
||||
text-align: left;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<table>
|
||||
<tbody>
|
||||
<tr>
|
||||
<th><code>perspective: 250px;</code>
|
||||
</th>
|
||||
<th><code>perspective: 350px;</code>
|
||||
</th>
|
||||
<th><code>perspective: 500px;</code>
|
||||
</th>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>
|
||||
<div class="container">
|
||||
<div class="cube pers250">
|
||||
<div class="face front"></div>
|
||||
<div class="face back"></div>
|
||||
<div class="face right"></div>
|
||||
<div class="face left"></div>
|
||||
<div class="face top"></div>
|
||||
<div class="face bottom"></div>
|
||||
</div>
|
||||
</div>
|
||||
</td>
|
||||
<td>
|
||||
<div class="container">
|
||||
<div class="cube pers350">
|
||||
<div class="face front"></div>
|
||||
<div class="face back"></div>
|
||||
<div class="face right"></div>
|
||||
<div class="face left"></div>
|
||||
<div class="face top"></div>
|
||||
<div class="face bottom"></div>
|
||||
</div>
|
||||
</div>
|
||||
</td>
|
||||
<td>
|
||||
<div class="container">
|
||||
<div class="cube pers500">
|
||||
<div class="face front"></div>
|
||||
<div class="face back"></div>
|
||||
<div class="face right"></div>
|
||||
<div class="face left"></div>
|
||||
<div class="face top"></div>
|
||||
<div class="face bottom"></div>
|
||||
</div>
|
||||
</div>
|
||||
</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</body>
|
||||
</html>
|
||||
81
tests/html/test_3d_transform_2.html
Normal file
81
tests/html/test_3d_transform_2.html
Normal file
|
|
@ -0,0 +1,81 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<style type="text/css">
|
||||
.pers200 {
|
||||
perspective: 200px;
|
||||
}
|
||||
|
||||
.pers500 {
|
||||
perspective: 500px;
|
||||
}
|
||||
|
||||
.container {
|
||||
//background-color: red;
|
||||
width: 200px;
|
||||
height: 200px;
|
||||
margin: 75px 0 0 75px;
|
||||
//border: 1px solid red;
|
||||
}
|
||||
.cube {
|
||||
//background-color: green;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
backface-visibility: visible;
|
||||
perspective-origin: 150% 150%;
|
||||
transform-style: preserve-3d;
|
||||
}
|
||||
.face {
|
||||
display: block;
|
||||
position: absolute;
|
||||
width: 100px;
|
||||
height: 100px;
|
||||
border: none;
|
||||
line-height: 100px;
|
||||
font-family: sans-serif;
|
||||
font-size: 60px;
|
||||
color: white;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
/* Define each face based on direction */
|
||||
.front {
|
||||
background: rgba(1, 1, 1, 0.5);
|
||||
transform: translateZ(50px);
|
||||
}
|
||||
.back {
|
||||
background: rgba(0, 255, 0, 0.5);
|
||||
color: black;
|
||||
transform: rotateY(180deg) translateZ(50px);
|
||||
}
|
||||
.right {
|
||||
background: rgba(196, 0, 0, 0.7);
|
||||
transform: rotateY(90deg) translateZ(50px);
|
||||
}
|
||||
.left {
|
||||
background: rgba(0, 0, 196, 0.7);
|
||||
transform: rotateY(-90deg) translateZ(50px);
|
||||
}
|
||||
.top {
|
||||
background: rgba(196, 196, 0, 0.7);
|
||||
transform: rotateX(90deg) translateZ(50px);
|
||||
}
|
||||
.bottom {
|
||||
background: rgba(196, 0, 196, 0.7);
|
||||
transform: rotateX(-90deg) translateZ(50px);
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div class="container">
|
||||
<div class="cube pers500">
|
||||
<div class="face front"></div>
|
||||
<div class="face back"></div>
|
||||
<div class="face right"></div>
|
||||
<div class="face left"></div>
|
||||
<div class="face top"></div>
|
||||
<div class="face bottom"></div>
|
||||
</div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
52
tests/html/test_3d_transform_zsort.html
Normal file
52
tests/html/test_3d_transform_zsort.html
Normal file
|
|
@ -0,0 +1,52 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<style type="text/css">
|
||||
* {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
}
|
||||
.container {
|
||||
perspective: 100px;
|
||||
background-color: rgba(0, 0, 0, 0.5);
|
||||
width: 600px;
|
||||
height: 600px;
|
||||
transform-style: preserve-3d;
|
||||
}
|
||||
.f1 {
|
||||
position: absolute;
|
||||
top: 0px;
|
||||
left: 0px;
|
||||
width: 200px;
|
||||
height: 200px;
|
||||
background-color: red;
|
||||
transform: translate3d(0, 0, -5px);
|
||||
}
|
||||
.f2 {
|
||||
position: absolute;
|
||||
top: 100px;
|
||||
left: 100px;
|
||||
width: 200px;
|
||||
height: 200px;
|
||||
background-color: green;
|
||||
transform: translate3d(0, 0, 0);
|
||||
}
|
||||
.f3 {
|
||||
position: absolute;
|
||||
top: 200px;
|
||||
left: 200px;
|
||||
width: 200px;
|
||||
height: 200px;
|
||||
background-color: blue;
|
||||
transform: translate3d(0, 0, 0);
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div class="container">AAA
|
||||
<div class="f1"></div>
|
||||
<div class="f2"></div>
|
||||
<div class="f3"></div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
Loading…
Add table
Add a link
Reference in a new issue