在“网页制作:初步了解CSS3(2)-web前端https://yydpt.blog.csdn.net/article/details/124333878?spm=1001.2014.3001.5502”的文章中已经给大家简单的介绍了一些CSS3的属性!
现在给大家再继续介绍一些CSS3的有趣属性
skew() //通过 skew() 方法,元素翻转给定的角度,根据给定的水平线(X 轴)和垂直线(Y 轴)参数
例如:
div
{
transform: skew(30deg,20deg);
-ms-transform: skew(30deg,20deg); /* IE 9 */
-webkit-transform: skew(30deg,20deg); /* Safari and Chrome */
-o-transform: skew(30deg,20deg); /* Opera */
-moz-transform: skew(30deg,20deg); /* Firefox */
}
值 skew(30deg,20deg) 围绕 X 轴把元素翻转 30 度,围绕 Y 轴翻转 20 度。
matrix() //matrix() 方法把所有 2D 转换方法组合在一起。matrix() 方法需要六个参数,包含数学函数,允许您:旋转、缩放、移动以及倾斜元素。
如何使用 matrix 方法将 div 元素旋转 30 度
例如:
div
{
transform:matrix(0.866,0.5,-0.5,0.866,0,0);
-ms-transform:matrix(0.866,0.5,-0.5,0.866,0,0); /* IE 9 */
-moz-transform:matrix(0.866,0.5,-0.5,0.866,0,0); /* Firefox */
-webkit-transform:matrix(0.866,0.5,-0.5,0.866,0,0); /* Safari and Chrome */
-o-transform:matrix(0.866,0.5,-0.5,0.866,0,0); /* Opera */
}
3D 转换
rotateX() //通过 rotateX() 方法,元素围绕其 X 轴以给定的度数进行旋转。
例子:
div
{
transform: rotateX(120deg);
-webkit-transform: rotateX(120deg); /* Safari 和 Chrome */
-moz-transform: rotateX(120deg); /* Firefox */
}
rotateY() //通过 rotateY() 方法,元素围绕其 Y 轴以给定的度数进行旋转。
例子:
div
{
transform: rotateY(130deg);
-webkit-transform: rotateY(130deg); /* Safari 和 Chrome */
-moz-transform: rotateY(130deg); /* Firefox */
}
CSS3还有许多有趣的属性,但是由于现在CSS3还存在一些兼容性的问题,某些浏览器会有不兼容的情况,所以大家写网页的时候需要根据实际的情况来使用,切勿滥用!
CSS3的属性用于手机网站比较多点,PC端的网站根据实际情况来使用比较好!
关注微信公众号(月影WEB),了解更多的前后端知识;
欢迎大家关注互相交流学习;