移动web 02 分享

Amani
118 阅读2分钟

移动web 第二天

空间转换

使用transform属性实现元素在空间内的位移、旋转、缩放等效果

  • 空间：是从坐标轴角度定义的。x 、y 和z三条坐标轴构成了一个立体空间，z轴位置与视线方向相同。
  • 空间转换也叫3D转换
  • 属性：transform

使用translate实现元素空间位移效果

  • 语法
    • transform: translate3d(x, y, z);
    • transform: translateX(值);
    • transform: translateY(值);
    • transform: translateZ(值);
  • 取值（正负均可）
    • 像素单位数值
    • 百分比

透视

  • 使用perspective属性实现透视效果

  • 思考：生活中，同一个物体，观察距离不同，视觉上有什么区别？

    • 答：近大远小、近清楚远模糊

  • 思考：默认情况下，为什么无法观察到Z轴位移效果？

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

  • 属性（添加给父级

    • perspective:值;

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

    • 作用

    • 空间转换时，为元素添加近大远小、近实远虚的视觉效果

  • 属性**（添加给父级）**

    • perspective:值;
    • 透视距离也称为视距，所谓的视距就是人的眼睛到屏幕的距离。

使用rotate实现元素空间旋转效果

  • 语法
    • transform:rotateZ(值);
    • transform:rotateX(值);
    • transform:rotateY(值);
  • 左手法则
    • 判断旋转方向: 左手握住旋转轴, 拇指指向正值方向, 手指弯曲方向为旋转正值方向

1647406470050.png

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

  • 思考：使用perspective透视属性能否呈现立体图形？
    • 答：不能，perspective只增加近大远小、近实远虚的视觉效果。
  • 实现方法
    • 添加transform-style: preserve-3d;
    • 使子元素处于真正的3d空间

立体呈现

  • 呈现立体图形步骤

    • 盒子父元素添加transform-style: preserve-3d；
    • 按需求设置子盒子的位置（位移或旋转）

  • 注意

    • 空间内，转换元素都有自已独立的坐标轴，互不干扰

    代码

    <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .box{
            width: 800px;
            height: 800px;
            margin: 300px auto;
            position: relative;
            transform-style: preserve-3d;
            transform: rotate3d(1,1,1,50deg);
            transition: 3s;
        }
        .box:hover{
            transform: rotate3d(1,1,1,7200deg);
        }
        .box div{
            position: absolute;
            left: 0;
            top: 0;
            width:100%;
            height: 100%;
            opacity: 0.6;
        }
        .box1{
            background-color: blue;
            transform: translateZ(400px) ;
        }
        .box2{
            background-color: yellowgreen;
            transform: translateZ(-400px) ;
        }
        .box3{
            background-color: cadetblue;
            transform: translateX(-400px) rotateY(-90deg);
        }
        .box4{
            background-color:red;
            transform: translateX(400px) rotateY(90deg);
        }
        .box5{
            background-color: darkgoldenrod;
            transform: translatey(-400px) rotatex(-90deg);
        }
        .box6{
            background-color: pink;
            transform: translatey(400px) rotatex(90deg);
        }
    </style>
</head>
<body>
    <div class="box">
        <div class="box1">哈</div>
        <div class="box2">哈哈</div>
        <div class="box3">哈哈哈</div>
        <div class="box4">哈哈哈哈</div>
        <div class="box5">哈哈哈哈哈</div>
        <div class="box6">哈哈哈哈哈哈</div>
    </div>
</body>
</html>

3D导航

目标：使用立体呈现技巧实现3D导航效果

  • 思考：绿色和橙色盒子是如何摆放的？

    • 搭建立方体
      • 绿色盒子是立方体的前面
      • 橙色盒子是立方体的上面

  • 结论：绿色和橙色部分共需要3个标签

    • 1个父级标签

    • 绿色和橙色共2个标签（子级） 1647409466404.png

    实现思路

    • 搭建立方体：绿色盒子是立方体的前面，橙色盒子是立方体的上面
    • 添加hover状态旋转切换效果

    代码

    <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .box{
            width: 300px;
            margin: 200px auto;
            /* transform: rotate3d(1,1,1,50deg); */
            perspective: 1000px;
        }
        a{
            float: left;
            transform-style:preserve-3d ;
            display: inline-block;
            text-decoration: none;
            width: 100px;
            height: 40px;
            position: relative;
            transition: 1s;
        }
        .box1,
        .box2{
            position: absolute;
            left: 0px;
            top: 0px;
            width: 100px;
            height: 40px;
            color: #FFF;
            font-size: 20px;
            line-height: 40px;
            text-align: center;
            
        }
        a:hover{
            transform: rotateX(-90deg);
        }
        .box1{
            background-color: blue;
            transform: translateZ(20px);

        }
        .box2{
            background-color: aqua;
            transform: translateY(-20px) rotateX(90deg);
        }

    </style>
</head>
<body>
    <div class="box">
        <a href="#">
            <div class="box1">擦</div>
            <div class="box2">大哥</div>
        </a>
        <a href="#">
            <div class="box1">擦</div>
            <div class="box2">大哥</div>
        </a>
        <a href="#">
            <div class="box1">擦</div>
            <div class="box2">大哥</div>
        </a>
    </div>
</body>
</html>
avatar
文章
阅读
粉丝