Making a kaleidoscope on CSS + JS

I somehow never thought about such a thing as a kaleidoscope on the page. Saw them somehow earlier, but did not pay special attention. And then I saw in Lebedev’s portfolio a kaleidoscope on a flash, I twisted it with my mouse, I understood the principle of work and thought “Christmas trees, it's not difficult!”.

Of course, one cannot say that it is really very simple. And you can not say that it turned out all that I wanted. But there is something to see, for which I invite under the cat.

UPD
In the post he added an improved version of the hablo man hlomzik , which does not work in IE, but with a smaller amount of code and with more correct behavior.
')

At the very beginning, I hoped that it would work absolutely everywhere and well. It didn't quite work out. As a result:

• Firefox / Safari / Chrome - Works perfect (who would doubt).
• IE8 - works, but only if the kaleidoscope is small (up to 300x300). If more - begins to seriously slow down.
• IE7 will work if you add a separate CSS for it in which to correct the positioning of the blocks.
• Opera - nicerta does not work. This is a separate song. Immediately appeal to the guys from the Opera, who will read it - look at the demo and issue it as a bugreport. In the “fastest browser on earth” © CSS-transform slows down so godlessly that it does not go into any gate. And again, the operatic eternal problem - a complete crap when using overflow: hidden and non-static-positioned elements. DO SOMETHING WITH THIS!

Immediately I will give a link to the working example, so that it is clear what it is all about: kaleidoscope.terion.name
So let's go.

Task 1: understand how to do it at all.

The kaleidoscope consists of 12 sectors assembled into a disk. Accordingly, the question arises: how to make a sector? Actually, it is very simple. We need 4 blocks and some CSS. It should look like this:

The block-container, one block turned by -15 °, inside the block turned by 30 °, inside another turned by -15 °.
The sector has a background image that we will shift.

Task 2: in fact, collect it all.

The code is accordingly very simple:

<div class = "sc s1" >
<div class = "rl" >
<div class = "rr" >
<div class = "sv" >
</div>
</div>
</div>
</div>

Yes, we immediately assume that there may be several kaleidoscopes on the page, so we only use classes.
An important condition : the size of the kaleidoscope should be changed by changing the size of the container only; accordingly, everything inside should be in percent.
Immediately, I note that the percentage values ​​were selected by the method of scientific spearcasting, since my knowledge of trigonometry is not so deep as to calculate all this :)

1. .scope_container .sc {
2. width: 50%;
3. height: 50%;
4. -webkit-transform-origin: top center;
5. -moz-transform-origin: top center;
6. -o-transform-origin: top center;
7. transform-origin: top center;
8. position: absolute;
9. top: 50%;
10. left: 25%;
11. z-index: -1;
12. }
14. .scope_container .sc div {
15. overflow: hidden}
17. .scope_container .rl {
18. height: 110%;
19. width: 60%;
20. -webkit-transform: rotate (-15deg);
21. -moz-transform: rotate (-15deg);
22. -o-transform: rotate (-15deg);
23. transform: rotate (-15deg);
24. position: relative;
25. top: 1.5%;
26. left: 4.5%;
28. }
30. .scope_container .rr {
31. height: 100%;
32. width: 100%;
33. -webkit-transform: rotate (30deg);
34. -moz-transform: rotate (30deg);
35. -o-transform: rotate (30deg);
36. transform: rotate (30deg);
37. position: relative;
38. top: 7%;
39. left: 51%;
40. }
42. .scope_container .sv {
43. width: 105%;
44. height: 105%;
45. -webkit-transform: rotate (-15deg);
46. -moz-transform: rotate (-15deg);
47. -o-transform: rotate (-15deg);
48. transform: rotate (-15deg);
49. position: relative;
50. top: -2%;
51. left: -29%;
52. }

So, we have code for the sector. Now these sectors should be 12 and should not be wrapped in 2 containers, because internal is used to position the elements, and external - to set the size and trim unnecessary.

As a result, the entire html-code will be:

1. < div class = "parent" >
2. < div class = "scope_container pattern" >
4. < div class = "sc s1" > < div class = "rl" > < div class = "rr" > < div class = "sv" > </ div > </ div > </ div > </ div >
5. < div class = "sc s2" > < div class = "rl" > < div class = "rr" > < div class = "sv" > </ div > </ div > </ div > </ div >
6. < div class = "sc s3" > < div class = "rl" > < div class = "rr" > < div class = "sv" > </ div > </ div > </ div > </ div >
7. < div class = "sc s4" > < div class = "rl" > < div class = "rr" > < div class = "sv" > </ div > </ div > </ div > </ div >
8. < div class = "sc s5" > < div class = "rl" > < div class = "rr" > < div class = "sv" > </ div > </ div > </ div > </ div >
9. < div class = "sc s6" > < div class = "rl" > < div class = "rr" > < div class = "sv" > </ div > </ div > </ div > </ div >
10. < div class = "sc s7" > < div class = "rl" > < div class = "rr" > < div class = "sv" > </ div > </ div > </ div > </ div >
11. < div class = "sc s8" > < div class = "rl" > < div class = "rr" > < div class = "sv" > </ div > </ div > </ div > </ div >
12. < div class = "sc s9" > < div class = "rl" > < div class = "rr" > < div class = "sv" > </ div > </ div > </ div > </ div >
13. < div class = "sc s10" > < div class = "rl" > < div class = "rr" > < div class = "sv" > </ div > </ div > </ div > </ div >
14. < div class = "sc s11" > < div class = "rl" > < div class = "rr" > < div class = "sv" > </ div > </ div > </ div > </ div >
15. < div class = "sc s12" > < div class = "rl" > < div class = "rr" > < div class = "sv" > </ div > </ div > </ div > </ div >
17. </ div >
18. </ div >

Classes s1 - s12 to determine the position of each sector.
The pattern class defines which picture will be used (thanks to eto_moy_nick for the pattern :))

Arrange the blocks in places:

1. .scope_container .s1 {
2. -webkit-transform: rotate (0deg);
3. -moz-transform: rotate (0deg);
4. -o-transform: rotate (0deg);
5. transform: rotate (0deg);
6. }
7. .scope_container .s2 {
8. -webkit-transform: rotate (30deg);
9. -moz-transform: rotate (30deg);
10. -o-transform: rotate (30deg);
11. transform: rotate (30deg);
12. }

And so on until the 12th in steps of 30 degrees.

In general, that's all.
But there is an IE who does not understand all this! But for IE there are filters : filter: progid: DXImageTransform. Microsoft. Matrix (...) .
Therefore, in the conditional comment [if IE 8] we add the following code:

1. .scope_container .s1 {
2. -webkit-transform: rotate (0deg);
3. -moz-transform: rotate (0deg);
4. -o-transform: rotate (0deg);
5. transform: rotate (0deg);
6. }
7. .scope_container .s2 {
8. -webkit-transform: rotate (30deg);
9. -moz-transform: rotate (30deg);
10. -o-transform: rotate (30deg);
11. transform: rotate (30deg);
12. }

As shown by experiments, with absolute positioning and the matrix at the IE trouble. Therefore it was necessary to fence such crutches.

Further:

1. .s2 {
2. filter: progid: DXImageTransform.Microsoft.Matrix (M11 = 0.86602540, M12 = -0.50000000, M21 = 0.50000000, M22 = 0.86602540, SizingMethod = 'auto expand', FilterType = 'nearest neighbor');
3. margin: -64.5% 0 0 -25%;
4. }
5. .s3 {
6. filter: progid: DXImageTransform.Microsoft.Matrix (M11 = 0.50000000, M12 = -0.86602540, M21 = 0.86602540, M22 = 0.50000000, SizingMethod = 'auto expand', FilterType = 'nearest neighbor');
7. margin: -60.5% 0 0 -32.8%;
8. }

Etc.
To my surprise, FilterType = 'nearest neighbor' did not work (without bicubic anti-aliasing, most likely there would be no such brakes).
For matrix calculations, I used this tool that just saved my life: www.boogdesign.com/examples/transforms/matrix-calculator.html
Margins were manually placed blocks. If there is a desire to make this all work in IE7, it is only necessary for him to rewrite these same margins.

Task 3: make it move

Javascript. You need to move the background of the sectors for the mouse. At the same time, we remember that the kaleidoscope on the page is not one. The code below, read the comments:

1. <script type = "text / javascript" >
3. // We use classes, but IE does not know how to choose them. We compensate for this disadvantage.
4. if ( document .getElementsByClassName) {
6. getElementsByClass = function (classList, node) {
7. return (node ​​|| document ) .getElementsByClassName (classList)
8. }
10. } else {
12. getElementsByClass = function (classList, node) {
13. var node = node || document ,
14. list = node.getElementsByTagName ( '*' ),
15. length = list.length,
16. classArray = classList.split (/ \ s + /),
17. classes = classArray.length,
18. result = [], i, j
19. for (i = 0; i <length; i ++) {
20. for (j = 0; j <classes; j ++) {
21. if (list [i] .className.search ( '\\ b' + classArray [j] + '\\ b' )! = -1) {
22. result.push (list [i])
23. break
24. }
25. }
26. }
28. return result
29. }
30. }
33. // Get the mouse coordinates
34. function mousePageXY (e)
35. {
36. var x = 0, y = 0;
38. if (! e) e = window. event ;
40. if (e.pageX || e.pageY)
41. {
42. x = e.pageX;
43. y = e.pageY;
44. }
45. else if (e.clientX || e.clientY)
46. {
47. x = e.clientX + ( document .documentElement.scrollLeft || document .body.scrollLeft) - document .documentElement.clientLeft;
48. y = e.clientY + ( document .documentElement.scrollTop || document .body.scrollTop) - document .documentElement.clientTop;
49. }
51. return { "x" : x, "y" : y};
52. }
55. window.onload = function () {
57. var scope_cont = getElementsByClass ( 'scope_container' , document );
59. // There can be several kaleidoscopes, consider this.
60. for (i = 0; i <scope_cont.length; i ++)
61. {
62. scope_cont [i] .onmouseover = function () {
63. var sect = getElementsByClass ( 'sv' , this );
64. var curscope = this ;
66. this .onmousemove = function (e) {
67. var mCur = mousePageXY (e);
68. for (n = 0; n <sect.length; n ++)
69. {
70. // In even sectors, the background moves in one direction
71. if (n% 2) {
72. sect [n] .style.backgroundPosition = mCur.x + 'px' + mCur.y + 'px' ;
73. }
74. // Odd - to another
75. else {
76. sect [n] .style.backgroundPosition = mCur.x * (- 1) + 'px' + mCur.y + 'px'
77. }
78. }
80. }
81. }
82. scope_cont [i] .onmouseout = function () {
83. // We clean up after ourselves, so as not to overload the browser
84. document .onmousemove = null ;
85. }
86. }
87. }
88. </ script>

In general, it is ready.
Opera:
If the block .pattern add overflow: hidden - ALL disappears. As a result, a blank page with scrolls into emptiness for the width of the "fan".
If overflow: hidden is removed, then in the “fastest browser on earth” © this construction is slower than in IE.
This is a complete failure.

I hope you were interested :)

UPD
And here is an improved version of the hablomelochka hlomzik :
quaint.su/for/habrahabr/kaleidoscope
The discussion in which it was born is: habrahabr.ru/blogs/css/99019/?reply_to=3057019#comment_3054307