CSS3 3D效果基础版本

3D变换,3个属性

  • transform-style: prevserve-3d ;建立3D空间,必须是父元素,运动的元素没法建立
  • perspective:数字 景深
  • perspective-origin 景深基点: 视线是从哪个方向看过去的
  • transform : 新增函数
    • rotateX() 旋转X轴 类似单杠
    • rotateY() 旋转Y轴 类似钢管舞
    • rotateZ() 旋转Z轴 类似水平翻转
    • translateZ() 位移Z轴,简单来说就是近大远小
    • scaleZ() 放大

这里特别提醒用了3D空间必须加相对定位

围绕X轴旋转




    
    
    3D旋转



鼠标放到框子上面就会变形

效果图

CSS3 3D效果基础版本_第1张图片
围绕X轴旋转.gif

绕Y轴旋转




    
    
    绕Y轴旋转



  

2

效果图

CSS3 3D效果基础版本_第2张图片
围绕y轴旋转.gif

绕Z轴旋转




    
    
    TranslateZ



1

效果图 近大远小

CSS3 3D效果基础版本_第3张图片
围绕Z轴旋转.gif

你可能感兴趣的:(CSS3 3D效果基础版本)