3D in CSS

Transcript

1. 3D with CSS Basics of
2. Fundamentals
3. Document
4. Elements
5. Viewport
6. <p> <div> <ul> <ol> etc. <h1> Block Level Elements
7. <p> Inline Elements
8. <span> <a> <img> etc. Inline Elements
9. position: absolute; top: 100px; left: 100px;
11. position: relative; top: 100px; left: 100px;
12. Positioning
13. Absolute Positioning top: 0; right: 0; bottom: 0; left: 0;
14. Visual Positioning transform: translateY(-100px);
15. Rotation transform: rotate(45deg);
16. 3D Rotation transform: rotateX(45deg);
17. 3D Rotation transform: rotateY(45deg);
18. 3D Rotation transform: rotateZ(45deg);
19. 3D
20. transform: rotate3d(0, 1, 0, 45deg); x y z
21. Z-Axis transform: translateZ(0px);
22. Z-Axis transform: translateZ(100px);
23. Perspective
24. Perspective transform: translateZ(100px); perspective: 200px;
25. transform: translateZ(100px); perspective: 200px; Document
26. Document
27. 3D Preservation
28. transform-style: preserve-3d;
29. Clip Path( )
30. Clip Path clip-path: polygon(50% 0%, 100% 100%, 0% 100%);
32. https://github.com/briziel/css-3d-examples
33. Vielen Dank! Bonusfrage!?
34. Bildquellen • https://i.ytimg.com/vi/mNjeaJeINCk/maxresdefault.jpg • http://www.posterport.com/media/catalog/product/p/e/perspektive_hi-Poster-S.jpg • http://www.umzug321.de/wp-content/uploads/2018/05/karton.png • https://images.justwatch.com/backdrop/9953699/s1440/the-thirteenth-floor • http://hoycinema.abc.es/Media/201508/30/dirtydancing--644x362.jpg • https://mfoxes.net/gal/6448-t/dupkbSymqUO3xL440ABPNf4RMTN.jpg