Css3基础变形的语法以及使用介绍

语法:XnA胜于蓝|优秀个人博客

 XnA胜于蓝|优秀个人博客

transform: rotate(旋转) | scale(缩放) | skew(倾斜) | translate(位移);

注: 当多种变形方式综合在一起时，用空格隔开

 XnA胜于蓝|优秀个人博客

1. rotate 旋转( X/Y/Z 必须为大写 )XnA胜于蓝|优秀个人博客

    ① rotateX(30deg)  沿X轴翻转30deg  等价于  rotate3d(1,0,0,30deg)XnA胜于蓝|优秀个人博客

    3d空间的沿X轴翻转XnA胜于蓝|优秀个人博客

    ② rotateY(30deg) 沿Y轴翻转30deg  等价于  rotate3d(0,1,0,30deg)XnA胜于蓝|优秀个人博客

    3d空间的沿Y轴翻转XnA胜于蓝|优秀个人博客

    ③ rotateZ(30deg) 沿Z轴翻转30deg  等价于  rotate3d(0,0,1,30deg)XnA胜于蓝|优秀个人博客

    3d空间的沿Z轴翻转XnA胜于蓝|优秀个人博客

    ④ rotate(45deg) 当不指定轴时，相当于2d空间的旋转，正值为顺时针，负值为逆时针XnA胜于蓝|优秀个人博客

    注: 设置旋转变形时，单位degXnA胜于蓝|优秀个人博客

 XnA胜于蓝|优秀个人博客

2. scale 缩放XnA胜于蓝|优秀个人博客

    ① scaleX(1.5)  沿X轴放大或缩小，大于1为放大，小于1为缩小XnA胜于蓝|优秀个人博客

    ② scaleY(0.5)  沿Y轴放大或缩小XnA胜于蓝|优秀个人博客

    ③ scale(1.5)  X轴，Y轴同时放大或缩小XnA胜于蓝|优秀个人博客

    ④ scale(-1.5)  先翻转再缩放XnA胜于蓝|优秀个人博客

 XnA胜于蓝|优秀个人博客

3. skew 倾斜(扭曲)XnA胜于蓝|优秀个人博客

    ① skewX(30deg)  沿X轴倾斜XnA胜于蓝|优秀个人博客

    ② skewY(-30deg)  沿Y轴倾斜XnA胜于蓝|优秀个人博客

    ③ skew(30deg)  不指定轴时，默认沿X轴倾斜XnA胜于蓝|优秀个人博客

    ④ 注: 下方两种写法倾斜效果不同XnA胜于蓝|优秀个人博客

        (a)  skew(30deg,30deg)  X轴，Y轴同时倾斜XnA胜于蓝|优秀个人博客

        (b)  skewX(30deg)    skewY(30deg)  X轴，Y轴同时倾斜XnA胜于蓝|优秀个人博客

    注: 倾斜单位角度(deg)XnA胜于蓝|优秀个人博客

 XnA胜于蓝|优秀个人博客

4. translate 位移XnA胜于蓝|优秀个人博客

    ① translateX(100px)  沿X轴位移，向右为正，向左为负XnA胜于蓝|优秀个人博客

    ② translateY(-100px)  沿Y轴位移，向下为正，向上为负XnA胜于蓝|优秀个人博客

    ③ translateZ(100px)  沿Z轴位移，向前为正，向后为负XnA胜于蓝|优秀个人博客

        注: 当设置沿Z轴的位移时，需要给本元素或父元素设置透视值XnA胜于蓝|优秀个人博客

    ④ translate(100px)  不指定轴时，默认沿X轴位移XnA胜于蓝|优秀个人博客

    ⑤ translate(1000px,100px)  X轴和Y轴同时位移XnA胜于蓝|优秀个人博客

        translateX(100px)   translateY(100px)  X轴和Y轴同时位移XnA胜于蓝|优秀个人博客

Tags：

Css3基础   语法

转载：【免责声明】：转载自其他平台或媒体的文章，本站将注明来源及作者，但不对所包含内容的准确性、可靠性或网站性提供任何明示或暗示的保证，仅做参考！如有侵权，请联系本站并提供相关证明，本站将依据著作权人意见删除该文，并不承担任何责任！
如果您认为本文侵犯了您的版权信息，请与我们联系修正或删除。感谢您对胜于蓝个人博客网站平台的认可，非常欢迎各位朋友分享到个人站长或者朋友圈，但转载请说明文章出处“来源胜于蓝个人博客”。/web/html/74.html

扫描关注胜于蓝微信|公众号，第一时间获取网站模板更新动态

本文地址：/web/html/74.html

很赞哦！ ()