您现在的位置是:首页 > 网站制作 > CSS3|Html5CSS3|Html5
Css3基础变形的语法以及使用介绍
胜于蓝2019-07-30【CSS3|Html5】人已围观
简介语法: transform: rotate(旋转) | scale(缩放) | skew(倾斜) | translate(位移);注: 当多种变形方式综合在一起时,用空格隔开 1. rotate 旋转( X/Y/Z 必须为大写 ) ① rot
语法:
transform: rotate(旋转) | scale(缩放) | skew(倾斜) | translate(位移);注: 当多种变形方式综合在一起时,用空格隔开
1. rotate 旋转( X/Y/Z 必须为大写 )
① rotateX(30deg) 沿X轴翻转30deg 等价于 rotate3d(1,0,0,30deg)
3d空间的沿X轴翻转
② rotateY(30deg) 沿Y轴翻转30deg 等价于 rotate3d(0,1,0,30deg)
3d空间的沿Y轴翻转
③ rotateZ(30deg) 沿Z轴翻转30deg 等价于 rotate3d(0,0,1,30deg)
3d空间的沿Z轴翻转
④ rotate(45deg) 当不指定轴时,相当于2d空间的旋转,正值为顺时针,负值为逆时针
注: 设置旋转变形时,单位deg
2. scale 缩放
① scaleX(1.5) 沿X轴放大或缩小,大于1为放大,小于1为缩小
② scaleY(0.5) 沿Y轴放大或缩小
③ scale(1.5) X轴,Y轴同时放大或缩小
④ scale(-1.5) 先翻转再缩放
3. skew 倾斜(扭曲)
① skewX(30deg) 沿X轴倾斜
② skewY(-30deg) 沿Y轴倾斜
③ skew(30deg) 不指定轴时,默认沿X轴倾斜
④ 注: 下方两种写法倾斜效果不同
(a) skew(30deg,30deg) X轴,Y轴同时倾斜
(b) skewX(30deg) skewY(30deg) X轴,Y轴同时倾斜
注: 倾斜单位角度(deg)
4. translate 位移
① translateX(100px) 沿X轴位移,向右为正,向左为负
② translateY(-100px) 沿Y轴位移,向下为正,向上为负
③ translateZ(100px) 沿Z轴位移,向前为正,向后为负
注: 当设置沿Z轴的位移时,需要给本元素或父元素设置透视值
④ translate(100px) 不指定轴时,默认沿X轴位移
⑤ translate(1000px,100px) X轴和Y轴同时位移
translateX(100px) translateY(100px) X轴和Y轴同时位移
Tags:
很赞哦! ()
相关文章
随机图文
-
HTML5网页如何让所有的浏览器都能识别语义元素标签样式
浏览器对语义元素的支持情况如今HTML5愈来愈引发大家的关注了,但目前支持HTML5的浏览器还不是主流,特别是国内用户近50%以上仍旧使用IE6,由于支持HTML5的IE9不支持Xp系统安装,这 -
CSS3 字体
CSS3 @font-face 规则以前 CSS3 的版本,网页设计师不得不使用用户计算机上已经安装的字体。使用 CSS3,网页设计师可以使用他/她喜欢的任何字体。当你发现您要使用的字体文件时 -
HTML 颜色
HTML 颜色由红色、绿色、蓝色混合而成。颜色值HTML 颜色由一个十六进制符号来定义,这个符号由红色、绿色和蓝色的值组成(RGB)。每种颜色的最小值是0(十六进制:#00)。最大值是255(十 -
HTML中 列表类属性的详细介绍
1.列表符号样式 语法:list-style-type: disc (实心圆) | circle (空心圆) | square (实心方块) | decimal (数字) | none (取掉列表符号样式); 2.使用图片作为列表符号 语法:l