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(值)

相关推荐
一川_7 分钟前
ElementUI分页器page-size切换策略:从保持当前页到智能计算的优化实践
前端
敲敲了个代码25 分钟前
[特殊字符] Web 字体裁剪优化实践:把 42MB 字体包瘦到 1.6MB
前端·javascript·学习·html·web
扎瓦斯柯瑞迫36 分钟前
Cursor 提示"Too Many Accounts"?一行命令重置机器码
前端·javascript·后端
前端付豪1 小时前
Vue3 响应式来!
前端·javascript·vue.js
芝士麻雀1 小时前
Zustand 深度解析:原理、源码与最佳实践
前端·react.js·前端框架
fruge1 小时前
前端性能优化实战指南:从首屏加载到用户体验的全面提升
前端·性能优化·ux
ZYMFZ1 小时前
Redis主从复制与哨兵集群
前端·git·github
lumi.1 小时前
前端本地存储技术笔记:localStorage 与 sessionStorage 详解
前端·javascript·笔记
旧雨散尘1 小时前
【react】初学react5-react脚手架搭建中的小众知识
前端·react.js·前端框架
炫饭第一名2 小时前
🌍🌍🌍字节一面场景题:异步任务调度器
前端·javascript·面试