Ticket #17665: opacity-transform.html

File opacity-transform.html, 1.2 KB (added by thebuck, 2 years ago)

Testcase: Hover the mouse over the skyblue element to rotate it. Un-/comment lines which have a comment in the style code to alter behaviour. I used hashes (#) to make CSS declarations invalid instead of commenting them properly out.

Line 
1<html><head><style>
2#force-layer {
3 opacity: .99; /* when opaque however, everything is fine */
4 background: skyblue;
5 transition: transform linear 5s;
6 width: 50%;
7 padding: 20% 0;
8}
9#force-layer:hover {
10 transform: rotate(360deg);
11# transform: translate(300px,300px); /* pure translation is OK for text */
12}
13#force-layer div {
14 background: white;
15 width: 5vw;
16 height: 5vw;
17 margin: 3px;
18 float:left;
19# transform: rotate(1deg); /* kill "Text-Block" rendering */
20# opacity: .99; /* cut white bricks like #force-layer when rotating */
21}
22</style></head><body>
23 start
24 <div id="force-layer">
25 <div>Test-Block</div>
26 <div>Test-Block</div>
27 <div>Test-Block</div>
28 <div>Test-Block</div>
29 <div>Test-Block</div>
30 <div>Test-Block</div>
31 <div>Test-Block</div>
32 <div>Test-Block</div>
33 <div>Test-Block</div>
34 <div>Test-Block</div>
35 <div>Test-Block</div>
36 <div>Test-Block</div>
37 <div>Test-Block</div>
38 <div>Test-Block</div>
39 <div>Test-Block</div>
40 <div>Test-Block</div>
41 <div>Test-Block</div>
42 <div>Test-Block</div>
43 <div>Test-Block</div>
44 <div>Test-Block</div>
45 <div>Test-Block</div>
46 <div>Test-Block</div>
47 <div>Test-Block</div>
48 <div>Test-Block</div>
49 Text directly inside
50 </div>
51 end
52</body></html>