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

相关推荐
前端工作日常10 分钟前
我学习到的babel插件移除Flow 类型注解效果
前端·babel·前端工程化
前端工作日常23 分钟前
我学习到的 Babel 配置
前端·babel·前端工程化
xw51 小时前
uni-app项目跑APP报useStore报错
前端·uni-app
!win !2 小时前
uni-app项目跑APP报useStore报错
前端·uni-app
拾光拾趣录2 小时前
Flexbox 布局:从“垂直居中都搞不定”到写出响应式万能布局
前端·css
huxihua20062 小时前
各种前端框架界面
前端
拾光拾趣录2 小时前
GET/POST 的区别:从“为什么登录请求不能用 GET”说起
前端·网络协议
Carlos_sam3 小时前
OpenLayers:ol-wind之渲染风场图全解析
前端·javascript
拾光拾趣录3 小时前
闭包:从“变量怎么还没死”到写出真正健壮的模块
前端·javascript
拾光拾趣录3 小时前
for..in 和 Object.keys 的区别:从“遍历对象属性的坑”说起
前端·javascript