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 一定要放在最后 |
|
收藏
淘帖
踩
