空间转换及案例

ss用transform属性实现元素在空间内的位移、旋转、缩放等效果（空间转换也叫3D转换）

空间位移 ：transform: translate3d(x, y, z);

默认情况下，无法观察到Z轴位移效果-----因为

Z轴是视线方向，移动效果应该是距离的远或近， 电脑屏幕是平面，默认无法观察远近效果

需配合透视观察效果

透视：perspective（添加给父级）

取值：像素单位数值， 数值一般在800 – 1200。

perspective只增加近大远小、近实远虚的视觉效果。不能否呈现立体图形

空间旋转：rotate

rotate3d(x, y, z, 角度度数) ：用来设置自定义旋转轴的位置及旋转的角度

立体呈现：transform-style: preserve-3d

（添加给父级）-----使子元素处于真正的3d空间

transform-style: preserve-3d呈现立体图形

空间旋转案例----立体导航

<ul>
      <li><a href="#">首页</a><a href="#">index</a></li>
      <li><a href="#">登录</a><a href="#">login</a></li>
      <li><a href="#">注册</a><a href="#">register</a></li>
    </ul>

设置样式

 <style>
      * {
        margin: 0;
        padding: 0;
      }
      ul {
        width: 360px;
        height: 40px;
        margin: 100px auto;
      }
      li {
        transform-style: preserve-3d;
        float: left;
        position: relative;
        list-style: none;
        width: 120px;
        height: 40px;
        line-height: 40px;
        text-align: center;
        transition: all 1s;
        /* transform: rotatex(30deg) rotatey(30deg); */
      }
      li:hover {
        transform: rotatex(-90deg);
      }
      a {
        display: block;
        position: absolute;
        color: #fff;
        text-decoration: none;
        width: 120px;
        height: 40px;
      }
      li a:nth-child(1) {
        background-color: green;
        transform: translateZ(20px);
        z-index: 1;
      }
      li a:nth-child(2) {
        background-color: orange;
        transform: rotatex(90deg) translateZ(20px);
      }
    </style>

 呈现效果

缩放：scale

transform: scaleX(倍数);

 transform: scaleY(倍数);

 transform: scaleZ(倍数);

 transform: scale3d(x, y, z);

标签：40px,style,转换,transform,li,案例,空间,height,3d
来源： https://blog.csdn.net/weixin_62579259/article/details/121246291