黑马程序员技术交流社区

标题: 笔记 [打印本页]

---

作者: dawn-space    时间: 2019-4-11 12:43
标题: 笔记
3D转换

·视距：perspertive  开启3D效果

        设置人和物体的距离--视距，这个值规定要设置给物体的父元素 perspertive:1000px
        translateZ 的值和 perspertive 都要大于0 否则容易出现兼容性问题。

1.位移(移动)
        transform: translate3d(x,y,z);

        transform: translateX(100px);
        transform: translateY(100px);
        transform: translateZ(100px);        Z轴 的单位一般用 px。
       
2.旋转
        transform: rotateX(45deg);       
        transform: rotateY(45deg);
        transform: rotateZ(45deg);

        transform: rotate3d(x,y,z,45deg);（不常用）x,y,z 取1和0代表开启或者关闭。

3.转换样式 transform-style （即：3D呈现）
                         flat;                平面模式
        transform-style: preserve-3d;        3维 立体环境
        这是 写给父级盒子的，影响子盒子，这个属性 非常重要。

4.缩放
        transform: scale3d(1,1,2);        宽高缩放一倍，厚度两倍。

·简写时，transform: rotate3d() translate3d() ; 书写顺序 会影响最终效果。
                这种情况，以旋转之后的面 为参考面 进行位移（轴方向 会变）。

CSS3兼容处理

        ·谷歌         -webkit
-
        ·火狐         -moz
-
        ·IE         -ms
-

        -webkit-border-radius: 30px 10px;
        -moz-border-radius: 30px 10px;
              -ms-border-radius: 30px 10px;
              border-radius: 30px 10px;        // border-radius 一定要放在最后

---

欢迎光临 黑马程序员技术交流社区 (http://bbs.itheima.com/)

黑马程序员IT技术论坛 X3.2