22-3D转换模块

2018-09-09 本文已影响0人晚溪呀

什么是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.在编写动画的时候, 固定不变的值写在前面, 需要变化的值写在后面

22-3D转换模块

猜你喜欢

热点阅读