空间转换及案例

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);

上一篇:unittest详解 跳过用例的执行(skip)


下一篇:如何使用SHOW WARNINGS?