CSS-3D转换模块

1. 什么是2D和3D
   2D就是一个平面, 只有宽度和高度, 没有厚度
   3D就是一个立体, 有宽度和高度, 还有厚度
   默认情况下所有的元素都是呈2D展现的
2. 如何让某个元素呈3D展现
   和透视一样, 想看到某个元素的3d效果, 只需要给他的父元素添加一个transform-style属性, 然后设置为preserve-3d即可

正方体(四个面顺序显示)

   ul{
            width: 200px;
            height: 200px;
            border: 1px solid #000;
            box-sizing: border-box;
            margin: 100px auto;
            position: relative;
            transform: rotateY(0deg) rotateX(0deg);
            transform-style: preserve-3d;
        }
   ul li{
            list-style: none;
            width: 200px;
            height: 200px;
            font-size: 60px;
            text-align: center;
            line-height: 200px;
            position: absolute;
            left: 0;
            top: 0;
        }
   ul li:nth-child(1){
            background-color: red;
            transform: rotateX(90deg) translateZ(100px);
        }
   ul li:nth-child(2){
            background-color: green;
            transform: rotateX(180deg) translateZ(100px);
        }
   ul li:nth-child(3){
            background-color: blue;
            transform: rotateX(270deg) translateZ(100px);
        }
   ul li:nth-child(4){
            background-color: yellow;
            transform: rotateX(360deg) translateZ(100px);
        }
   ul li:nth-child(5){
            background-color: purple;
            transform: translateX(-100px) rotateY(90deg);
        }
   ul li:nth-child(6){
            background-color: pink;
            transform: translateX(100px) rotateY(90deg);
        }

• 长方体只需要在正方体基础上加拉伸属性
  transform: rotateX(90deg) translateZ(100px) scale(2, 1);

ul li img{ 
            width: 200px;
            height: 200px;
        }

• 注意点:
  • 只要父元素被拉伸了,子元素也会被拉伸(li被拉伸,此时的img属性也会跟着拉伸)
  • 想看到整个立方的近大远小效果, 就给ul的父元素添加透视属性:
    perspective: 500px;

编写动画过程的注意点

@keyframes sport {
            from{
                transform: rotateX(-10deg) rotateY(0deg);
            }
            to{
                transform: rotateX(-10deg) rotateY(360deg);
            }
        }

1. 动画中如果有和默认样式中同名的属性, 会覆盖默认样式中同名的属性(需要在动画中编写)
2. 在编写动画的时候, 固定不变的值写在前面, 需要变化的值写在后面