HTML(28)——空间转换

空间:是从坐标轴角度定义的XYZ三条坐标轴构成了一个立体空间 Z轴位置与视线方向相同

空间转换

平移

属性:

  • transform: translate3d(x,y,z);
  • transform: translateX();
  • transform: translateY();
  • transform: translateZ();

取值:像素单位数值/百分比

默认情况下我们看不到Z轴的平移情况

视距

作用:指定了观察者与z=0平面的距离,为元素添加透视效果

透视效果:近大远小、近实远虚

属性:(添加给父级,取值范围800-1200)

perspective:视距;

复制代码
  <style>
    /*空间转换*/
    .father {
      perspective: 1000px;

    }

    .box {
      width: 200px;
      height: 200px;
      margin: 100px auto;
      background-color: blue;
      transition: all 0.5s;
    }

    .box:hover {
      transform: translateZ(-400px);
    }
  </style>
</head>

<body>
  <div class="father">
    <div class="box"></div>
  </div>
</body>

当鼠标悬停时,产生近大远小的效果,此时Z轴移动-400px

旋转

左手法则:

属性:根据旋转方向确定取值正负。左手握住旋转轴,拇指指向正值方向。其他手指弯曲方向为旋转正值方向

transform:rotateZ(值)

transform:rotateX(值)

transform:rotateY(值)

相关推荐
运维咖啡吧1 分钟前
周一才上线的网站,单单今天已经超过1000访问了
前端·程序员·ai编程
世界哪有真情4 分钟前
用虚拟IP扩容端口池:解决高并发WebSocket端口耗尽问题
前端·后端·websocket
前端世界5 分钟前
打造一个可维护、可复用的前端权限控制方案(含完整Demo)
前端
LeQi10 分钟前
当!important成为代码毒瘤:你的项目是不是也中了招?
前端·css·程序员
玲小珑12 分钟前
Next.js 教程系列(九)增量静态再生 (ISR):动态更新的静态内容
前端·next.js
Mintopia20 分钟前
B 样条曲线:计算机图形学里的 “曲线魔术师”
前端·javascript·计算机图形学
前端小巷子23 分钟前
跨域问题解决方案:CORS(跨域资源共享)
前端·网络协议·面试
大大。24 分钟前
van-tabbar-item选中active数据变了,图标没变
java·服务器·前端
Mintopia26 分钟前
Three.js 3D 世界中的噪声运动:当数学与像素共舞
前端·javascript·three.js
nc_kai27 分钟前
Flutter 之 每日翻译 PreferredSizeWidget
java·前端·flutter