- 什么是2D和3D
2D就是一个平面, 只有宽度和高度, 没有厚度
3D就是一个立体, 有宽度和高度, 还有厚度
- 默认情况下所有的元素都是呈2D展现的
- 如何让某个元素呈3D展现
- 和透视一样, 想看到某个元素的3d效果, 只需要给他的父元素添加一个transform-style属性, 然后设置为preserve-3d即可
3 .只要父元素被拉伸了,子元素也会被拉伸
-
坐标轴旋转图
image.png -
1的数字
4d5c05110a7964b3b94917fc5b9a687.png -
2的数字
544f516a986036ab1c9d14a96e6bd0c.png
-
3的数字
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style> body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,code,form,fieldset,legend,input,textarea,p,blockquote,th,td{ margin:0; padding:0; } ul{ position:relative; margin:100px auto; width:300px; height:300px; border:1px solid #000; transform-style:preserve-3d; transform:rotateX(0deg) rotateY(0deg); } ul li{ position:absolute; top:0; left:0; list-style:none; width: 300px; height: 300px; font-size:60px; text-align:center; line-height:300px; } ul li:nth-child(1){ background-color:red; transform:rotateX(90deg) translateZ(150px); } ul li:nth-child(2){ background-color:#01b7f5; transform:rotateX(180deg) translateZ(150px); } ul li:nth-child(3){ background-color:green; transform:rotateX(270deg) translateZ(150px); } ul li:nth-child(4){ background-color:#ccc; transform:rotateX(360deg) translateZ(150px); } ul li:nth-child(5){ background-color:#666; transform:translateX(-150px) rotateY(deg); } ul li:nth-child(6){ background-color:pink; transform:translateX(-150px) rotateY(deg); } </style> </head> <body> <ul> <li>1</li> <li>2</li> <li>3</li> <li>4</li> <!--<li>5</li>--> <!--<li>6</li>--> </ul> </body> </html>
注意点:
- 1.动画中如果有和默认样式中同名的属性, 会覆盖默认样式中同名的属性
- 2.在编写动画的时候, 固定不变的值写在前面, 需要变化的值写在后面
