Css3の limit

Look directly at the effect

Click on the screen to switch perspective (Android only retains photos and stars)

Demo Stamp

Before explaining the principle, you must accept my spit groove to understand a thing!

What do you think is going to happen if you ignore the headline? Because the demo phone can be opened, so it's h5.

People who are not in our profession say H5 I accept, but why is it that even a lot of people in this circle are h5?

Don't throw a word at H5, all right? As long as the mobile side of the page is open h5? If you look at the source and still feel that it is H5 do, I will hehe!

This demo needs to be CSS3 3d correlation and some JS calculation is the CSS from 2.0 to 3.0 belongs to HTML5?

It's not enough to use HTML5 's semantic elements to denote a girl's words, because girls may need makeup. She needs to be cute and beautiful! This requires CSS3 's debut, it can be structurally more stunning beauty!

Spit out the groove.

It's best to plot 3d space before doing this.

Those letters are expressed as L=logo c= clouds s= stars

The light blue curve is the angle of view path, and there are 3 spherical spheres on which the photos are distributed.

Some of the values are tricky, such as the z-coordinates of the stars cannot be confused with the spherical surface. The z-coordinates of the stars need to be larger than the maximum spherical equator radius!

Calculation of equatorial radius of spherical surface

W equivalent to the width of the picture can be expressed as a seamless distribution on the spherical equator to calculate the value of L

If the number of elements of the latitude is half the equator and the width and height of the image are the same, the above calculation can be used in the parallels.

If the width and height are not the same then you need to calculate two L and then calculate the most appropriate value

The number of elements per meridian also needs to be calculated to give the key code to generate the sphere by the ratio of each meridian radius to the equatorial radius.

    = sqrt (Pow (W*.5/tan (pi/(the*2)), 2) +pow (H*.5/tan (pi/(the*2)), 2)) *sz;      for (Let i = 0;i<=the;++i) {      = Pi*.5-i/the*pi;      Const n = sin (i/the*pi);      Const FAI = ABS (n-0) <.00001?1:n*the*2|0;        for (Let J = 0;j<fai;++j) {        = j/fai*pi*2;         Ars.push ({fai_rd,the_rd,tz,num:_.length,w,h});      }    }

The trajectory of the angle of view is actually the same as some of the react in the video play, but it is only applied to the 3d code

_.x = sin (sn.rd = sn.brd+sn.drd* (N-sin (N*2*PI)/(2*PI))) *sn.dx;

and a variety of sports. I've been talking about the first one. Nonlinear motion and linear motion

Actually, this is not the limit to CSS3.

You can add light or change the photo to a 3d CD box, but CSS3 doesn't provide light. We need a lot of extra computing CD boxes and a flat surface.

This makes the original light CSS3 trouble to have such as direct WebGL walk up!

We make full use of CSS3 does not require computer graphics can also make a very nice 3d effect of course those 3d things can not be very strong interaction!

Please don't h5 h5 h5.

Css3の limit