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 小时前
前端必看!12个JS神级简写技巧,代码效率直接飙升80%,告别加班!
前端·javascript
excel1 小时前
dep.ts 逐行解读
前端·javascript·vue.js
爱上妖精的尾巴1 小时前
5-20 WPS JS宏 every与some数组的[与或]迭代(数组的逻辑判断)
开发语言·前端·javascript·wps·js宏·jsa
excel1 小时前
Vue3 响应式核心源码全解析:Dep、Link 与 track/trigger 完整执行机制详解
前端
前端大卫1 小时前
一个关于时区的线上问题
前端·javascript·vue.js
whltaoin2 小时前
中秋赏月互动页面:用前端技术演绎传统节日之美
前端·javascript·html·css3·中秋主题前端
IT派同学2 小时前
TableWiz诞生记:一个被表格合并逼疯的程序员如何自救
前端·vue.js
西洼工作室4 小时前
CSS高效开发三大方向
前端·css
昔人'4 小时前
css`font-variant-numeric: tabular-nums` 用来控制数字的样式。
前端·css
铅笔侠_小龙虾5 小时前
动手实现简单Vue.js ,探索Vue原理
前端·javascript·vue.js