重庆市建设节能中心网站,网站建设旗舰品牌,网站开发分支结构,设计网站下载CSS3 2D 转换 先看兼容性 transform属性向应用元素应用2d 或者 3d装换#xff1b;该属性允许我们进行旋转#xff0c;缩放#xff0c;移动或者倾斜#xff1b; 基本语法#xff1a; transform: none|transform-functions;transform-function#xff1a;这东东有n的函数可…CSS3 2D 转换 先看兼容性 transform属性向应用元素应用2d 或者 3d装换该属性允许我们进行旋转缩放移动或者倾斜 基本语法 transform: none|transform-functions;transform-function这东东有n的函数可以使用我先来了解常用的 rotate(angle) 通过制定角度参数来对原元素指定一个2d的旋转不过先要设置transform-origin 它表示旋转的基点angle设置为正数则顺时针为负数则表示逆时针 css .demo{height:80px;width:200px;position:absolute;top:50px;background:green;-ms-transform:rotate(7deg);-moz-transform:rotate(7deg);-webkit-transform:rotate(7deg);-o-transform:rotate(7deg);
} 效果 (默认的它是以自己中心为基点开始旋转滴呀,可以通过改变transform-origin来改变他的值滴呀) transform-origin属性值可以是百分比、em、px等具体的值也可以是top、right、bottom、left和center这样的关键词。 CSS变形进行的旋转、移位、缩放等操作都是以元素自己中心变形原点位置进行变形的。但很多时候需要在不同的位置对元素进行变形操作 我们就可以使用transform-origin来对元素进行原点位置改变 下图中的红点代表中旋转的基点 还有更多关于transform-origin的基础知识我们稍后再总结我们先对transform有一个总体的认识。 接下来时我们的 Ttranslatex,y TranslateX(x,y)水平方向和垂直方向上的移动 TranslateX(x)仅水平方向上的移动; TranslateY(y)仅垂直方向上的移动 距离的我们看实例 Css: *{color:white;
}
.or{height:80px;width:160px;float:left;background:green;
}
.demo{height:80px;width:160px;float:left;background:green;transform:translate(200px,0px);-ms-transform:translate(200px,0px);-moz-transform:translate(200px,0px);-webkit-transform:translate(200px,0px);-o-transform:translate(200px,0px);
} 效果 缩放scalex,y scale(x,y)使元素水平方向和垂直方向同时缩放也就是X轴和Y轴同时缩 放 scaleX(x)元素仅水平方向缩放X轴缩放 scaleY(y)元素仅垂直方向缩放Y轴缩放 其中 心点就是元素的中心位置缩放基数为1如果其值大于1元素就放大反之其值小于1元素缩小 css代码 *{color:white;
}
.or{height:80px;width:160px;float:left;background:green;
}
.demo{height:80px;width:160px;float:left;background:green;transform:scale(2,2);-ms-transform:scale(2,2);-moz-transform:scale(2,2);-webkit-transform:scale(2,2);-o-transform:scale(2,2);
}
.demo1{height:80px;width:160px;float:left;background:red;transform:scaleX(2);-ms-transform:scaleX(2);-moz-transform:scaleX(2);-webkit-transform:scaleX(2);-o-transform:scaleX(2);
}
.demo2{height:80px;width:160px;float:left;background:black;transform:scaleY(2);-ms-transform:scaleY(2);-moz-transform:scaleY(2);-webkit-transform:scaleY(2);-o-transform:scaleY(2);
} 效果这里你还发现虽然div被放大了但是它原有的占位并没有变化 扭曲skew(xy,) skew(x,y)使元素在水平和垂直方向同时扭曲X轴和Y轴同时按一定的角度值 进行扭曲变形 skewX(x)仅使元素在水平方向扭曲变形X轴扭曲变形 skewY(y)仅使元素在垂直方向扭曲变形Y轴扭曲变形 *{color:white;
}
.or{height:80px;width:160px;float:left;background:green;
}
.demo{height:80px;width:160px;float:left;background:green;transform:skewX(30deg);-ms-transform:skewX(30deg);-moz-transform:skewX(30deg);-webkit-transform:skewX(30deg);-o-transform:skewX(30deg);
}
.demo1{height:80px;width:160px;float:left;background:red;transform:skewY(10deg);-ms-transform:skewY(10deg);-moz-transform:skewY(10deg);-webkit-transform:skewY(10deg);-o-transform:skewY(10deg);
}
.demo2{height:80px;width:160px;float:left;background:black;transform:skew(30deg,10deg);-ms-transform:skew(30deg,10deg);-moz-transform:skew(30deg,10deg);-webkit-transform:skew(30deg,10deg);-o-transform:skew(30deg,10deg);
} 效果 以往我们叠加效果都是用逗号(“”)隔开但在transform中使用多个transform-function时却需要有空格隔开。 最后我们再来看一个综合实例 这里还有其他额一些transform我们后期再来总结 转载于:https://www.cnblogs.com/mc67/p/5242603.html
