CSS3之转换-创新互联
一、转换
成都创新互联公司服务项目包括嘉祥网站建设、嘉祥网站制作、嘉祥网页制作以及嘉祥网络营销策划等。多年来,我们专注于互联网行业,利用自身积累的技术优势、行业经验、深度合作伙伴关系等,向广大中小型企业、政府机构等提供互联网行业的解决方案,嘉祥网站推广取得了明显的社会效益与经济效益。目前,我们服务的客户以成都为中心已经辐射到嘉祥省份的部分城市,未来相信会继续扩大服务区域并继续获得客户的支持与信任!1.定义:改变元素在页面的形状、角度、大小、位置的一种效果。
2.分类:2D转换和3D转换。
2D转换:
(1)位移
1-1 作用:改变元素在页面中的位置;
1-2 语法:属性--transform;取值如下:
1-2-1 translate(x):改变元素在X轴的位置。X取值为正,向右移动;X取值为负,向左移动;
1-2-2 translate(x,y):x同上。Y取值为正,向下移动;Y取值为负,向上移动;
1-2-3 translateX(x):只在X轴上移动;
1-2-4 translateY(y):只在Y轴上移动;
(2)缩放
2-1 作用:改变元素在页面中的大小
2-2 语法 : 属性--transform;取值如下:
2-2-1:scale(value) value表示横向和纵向等比缩放值;默认值为1,表示原始大小;>1表示放大,0~1表示缩小
2-2-2:scale(x,y)
2-2-3 : scaleX(x)
2-2-4 : scaleY(y)
(3)旋转
3-1 作用:改变元素在页面上的角度,要根据转换原点实现转换效果
3-2 语法:属性--transform;取值如下:
3-2-1 rotate(ndeg) n表示转换角度,n为正,表示顺时针旋转,n为负,表示逆时针旋转
旋转需要注意的地方:1.转换原点;2.元素的坐标轴也随着一同旋转。
先旋转后偏移 与先偏移后旋转 的区别
(4)倾斜
4-1 作用:改变元素在页面中的形状;
4-2 语法:属性transform;取值如下:
4-2-1:skew(xdeg) 向X轴倾斜角度,相当于y轴倾斜角度。x取值为正,y轴逆时针倾斜一定角度;x取值为负,y轴顺时针倾斜一定角度
4-2-2:skew(xdeg,ydeg) y取值为正,x轴顺时针倾斜一定角度;y取值为负,x轴逆时针倾斜一定角度
4-2-3:skewX(xdeg)
4-2-4:skewY(ydeg)
3D 转换:与2D相比,多了一个Z轴
属性:perspective
作用:假定 人眼 到 投射平面的距离
注意:
该属性要放在3D转换元素的父元素上
另外有需要云服务器可以了解下创新互联scvps.cn,海内外云服务器15元起步,三天无理由+7*72小时售后在线,公司持有idc许可证,提供“云服务器、裸金属服务器、高防服务器、香港服务器、美国服务器、虚拟主机、免备案服务器”等云主机租用服务以及企业上云的综合解决方案,具有“安全稳定、简单易用、服务可用性高、性价比高”等特点与优势,专为企业上云打造定制,能够满足用户丰富、多元化的应用场景需求。
网站栏目:CSS3之转换-创新互联
浏览地址:http://ybzwz.com/article/ceehec.html