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

相关推荐
小墨宝11 分钟前
js 生成pdf 并上传文件
前端·javascript·pdf
HED26 分钟前
用扣子快速手撸人生中第一个AI智能应用!
前端·人工智能
DN金猿30 分钟前
使用npm install或cnpm install报错解决
前端·npm·node.js
丘山子31 分钟前
一些鲜为人知的 IP 地址怪异写法
前端·后端·tcp/ip
志存高远6644 分钟前
Kotlin 的 suspend 关键字
前端
www_pp_1 小时前
# 构建词汇表:自然语言处理中的关键步骤
前端·javascript·自然语言处理·easyui
天天扭码2 小时前
总所周知,JavaScript中有很多函数定义方式,如何“因地制宜”?(ˉ﹃ˉ)
前端·javascript·面试
一个专注写代码的程序媛2 小时前
为什么vue的key值,不用index?
前端·javascript·vue.js
장숙혜2 小时前
ElementUi的Dropdown下拉菜单的详细介绍及使用
前端·javascript·vue.js
火柴盒zhang2 小时前
websheet之 编辑器
开发语言·前端·javascript·编辑器·spreadsheet·websheet