h5c3第三天

h5c3第三天

3D转换

3维坐标系

• X轴 水平向右为正
• Y轴 垂直向下为正
• Z轴 垂直于屏幕 由屏幕里面指向屏幕的外面为正

3D移动 translate3d

语法

transform: translate3d( x, y, z);

transform:translateZ(z);

z轴一般都用px单位

视距perspertive

远大近小

值一般大于0

设置人和物体的距离-视距 这个值给要设置的父元素或者上级元素

动态改变物体的translataZ 即可观察效果

 /* 父元素 */
    body {
      /* 视距 */
      perspective: 1000px;
    }

    /* 目标 */
    div {
      width: 200px;
      height: 200px;
      background-color: aqua;
      margin: 100px auto;
      /* z轴的移动 */
      transform: translateZ(0px);
    }

translateZ

• 用来设置物体（元素）到屏幕的距离
• 外正里负，越往外，我们看到的物体就越大

3D旋转 rotate3d

左手准则

比如要判断某元素沿着x轴是怎么旋转的

1. 左手的手拇指指向 x轴的正方向
2. 其余手指的弯曲方向就是该元素沿着x轴旋转的方向了
3. 沿X,Y,Z轴旋转都适用

语法

1. transform:rotateX(45deg);` 沿着x轴正方向旋转 45度

2. transform:rotateY(45deg) 沿着y轴正方向旋转 45deg

3. transform:rotateZ(45deg) 沿着Z轴正方向旋转 45deg

4. transform:rotate3d(x,y,z,deg) 沿着自定义轴旋转 deg为角度 了解即可

3D缩放 scale3d

控制元素 在 x轴，y轴，z轴上的缩放，也可以理解为 宽，高，厚度的缩放

转换样式 transform-style

控制子元素是否开启3维立体环境，写在子元素的父盒子上，不能是上上级

• transform-style: flat; 平面模式 - 不开启3维立体环境，默认值
• transform-style: preserve-3d; 3维立体环境

14-浏览器私有前缀以及总结

• 浏览器私有前缀是为了兼容老版本浏览器的写法，比较新版本的浏览器无须添加
• 前缀：
  • -moz-：firefox 火狐
  • -ms-：ie IE
  • -webkit-：safari、chrome 谷歌
  • -o-：opera 苹果

如果有添加前缀也解决不了兼容性问题，那么就不要使用该css3属性