Home > Developer > Web Develop
A, Transform:rotatex () Rotatey ()
You want to rotate the picture first.
Rotatex (30DEG) became
It's a little hard to understand. Attached geometric diagram (side view):
Rotatey (30deg):
For the same reason, the geometric diagram (top view):
Then you can rotate the picture and prepare 8 images that need to be rotated at an angle of (360/8 = 45deg).
<style type= "Text/css" >._container{width:300px;height:150px;margin:0 Auto;} Img{width:300px;height:150px;position:absolute;cursor:pointer;} Img:nth-child (1) {Transform:rotatey (0deg);} Img:nth-child (2) {Transform:rotatey (45deg);} Img:nth-child (3) {Transform:rotatey (90deg);} Img:nth-child (4) {Transform:rotatey (135deg);} Img:nth-child (5) {Transform:rotatey (180deg);} Img:nth-child (6) {Ransform:rotatey (225deg);} Img:nth-child (7) {Transform:rotatey (270deg);} Img:nth-child (8) {Transform:rotatey (315deg);} </style><body><div class= "_container" >< IMG src= "img/rotate_translate7.jpg"/></div></body> = = Then we find that the pictures are piled up in a pile
Second, transform-style:preserve-3d;
As the picture piled together we gave him a transform-style:preserve-3d;
So the picture will be displayed in 3d view
. _container{width:300px;height:150px;margin:0px auto;transform-style:preserve-3d;}：
The amount ..... The pictures are all glued together.
Third, Transform:translatez ()
This is a positive negative figure of the tranlate. So we need to translate the pictures along the z axis for a certain length.
Note: The translate coordinates here are picture coordinates, so when the picture is rotate, the coordinates follow rotate, so you can set the Tranlatez of the IMG to the same value.
In this case, all pictures are the same in the z direction from the far point.
calculated that the value of Translatez is approximately equal to 482.86px
Img:nth-child (1) {Transform:rotatey (0deg) Translatez (482.86px);} Img:nth-child (2) {Transform:rotatey (45deg) Translatez (482.86px);} Img:nth-child (3) {Transform:rotatey (90deg) Translatez (482.86px);} Img:nth-child (4) {Transform:rotatey (135deg) Translatez (482.86px);} Img:nth-child (5) {Transform:rotatey (180deg) Translatez (482.86px);} Img:nth-child (6) {Transform:rotatey (225deg) Translatez (482.86px);} Img:nth-child (7) {Transform:rotatey (270deg) Translatez (482.86px);} Img:nth-child (8) {Transform:rotatey (315deg) Translatez (482.86px);}：
Some people say to see how the past is the same as 2d. Bo-Master, are you kidding me? In fact, it is a 3d perspective. It's just that we've seen it from the front. That is, the main view of the geometry model.
We can rotate the container _container forward 10deg (Rotatex ( -10deg)).
. _container{width:300px;height:150px;margin:100px Auto;transform-style:preserve-3d;transform:rotatex ( -10deg);}Result diagram:
A bit of a look came out.
Iv. Perspective
This is a good thing.
Why do some graphs look past like 3d charts?
It's like a cube in front of you. When your perspective slowly from the 0~ away. The square that you see from the original 0 angle of view slowly into a cube.
Perspective's job is to tell us the picture from a certain perspective on the screen into the current display.
So we assume perspective:3000px;
Is the effect we see when our eyes are 3000px away from the screen. Rendered in the display.
：
CSS3 Implements 3D Carousel
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
