css实现平行四边形等特殊形状文字图片倾斜

实现方法：CSS属性`transform: skew(x,y)`

skew() 函数定义了一个元素在二维平面上的倾斜转换。指定一个或两个参数，它们表示在每个方向上应用的倾斜量。
这种转换是一种剪切映射 (横切)，它在水平和垂直方向上将单元内的每个点扭曲一定的角度。每个点的坐标根据指定的角度以及到原点的距离，进行成比例的值调整；因此，一个点离原点越远，其增加的值就越大。

语法： transform:skew(x,y);

通俗的讲，两个参数分别表示X轴和Y轴倾斜的角度，如果第二个参数为空，则默认为0。参数为正表示顺时针倾斜，参数为负表示向相反方向（逆时针）倾斜。
skewX(<angle>);表示只在X轴(水平方向)倾斜。
skewY(<angle>);表示只在Y轴(垂直方向)倾斜。

示例

1.X轴倾斜，Y轴不倾斜 `transform:skew(ax) == transform:skewX(ax)`

 transform: skew(30deg);transform: skewX(30deg);

实现效果：

2.X轴不倾斜，Y轴倾斜 `transform:skewY(ay)`

 transform: skewY(15deg);

实现效果：

3.X轴、Y轴都倾斜 `transform:skew(ax,ay)`

 transform: skew(30deg,15deg);

实现效果：

兼容：

div {transform: skew(30deg,20deg);-ms-transform: skew(30deg,20deg); /* IE 9 */-webkit-transform: skew(30deg,20deg); /* Safari and Chrome */
}

实例

1.编写一个平行四边形，里面的文字不倾斜。
当我们给父元素设置了倾斜，那么父元素及其包含的子元素都会倾斜。如果想要父元素倾斜，子元素不倾斜，那么给子元素设置负数值即可。

 <div class="box"> <div>哈哈哈哈哈哈哈</div></div>

.box {width:200px;height:30px;transform: skew(30deg);background:pink;
}.box div {font-size: 16px;line-height: 30px;text-align: center;transform: skew(-30deg);
}

实现效果：

如果对你有所帮助，请记得一键三联哦

css实现平行四边形等特殊形状文字图片倾斜相关推荐

[css] 怎么让div中的图片和文字同时上下居中？
[css] 怎么让div中的图片和文字同时上下居中? <div><img src="./"/><label>文字内容</label> ...
css如何实现鼠标移至图片上显示遮罩层及文字
css如何实现鼠标移至图片上显示遮罩层及文字问题:一张图片当鼠标移动到上方时,会显示一个遮罩层,并且显示一些提示文字 html: <div class="contentimg&quo ...
鼠标悬停 -css如何实现鼠标移至图片上显示遮罩层及文字
搜索这个效果的时候,很多人都是用css结合jQuery实现的,其实直接用css也可以实现哦~ 效果前: 效果后: 代码: <!DOCTYPE html> <html lang=&qu ...
css文字图片动画_文字图像互动动画
css文字图片动画 Following on from last week's issue (and inspired a bit by receiving the latest Type Direc ...
CSS filter 白色文案透明底图片转换任意颜色文字图片
 <!-- 1. 我们使用想转换的图片放入img内 2. 先用filter把他转换为白色 CSS filter滤镜任意色值 ...
html5文字图片垂直居中代码,css实现文字图片垂直居中效果
复制代码代码如下: 轻松实现:垂直居中文字图片 html{ font-size:12px; } .control{ width:600px; border:1px solid #000; paddin ...
jquery实现多行文字图片滚动效果
基于jquery的实现多行文字图片滚动的效果代码,如果我们在论坛公告等等这些实例了,下面我来给各位朋友介绍介绍. 1 <div id="scrollDiv"> 2 &l ...
html怎么设置图片倾斜度,CSS3-css如何使图片倾斜45度显示
下面我整理下不同浏览器对倾斜图片的实现,因为是 css3 的实现方式,如要求严格还是建议使用图片来实现,具体代码: IE下的实现,里面的参数请调整以达到45度效果: style="filte ...
[css] 描述下你所了解的图片格式及使用场景
[css] 描述下你所了解的图片格式及使用场景通常网页在显示的图片(图形)的时候,有以下几种格式:GIF.PNG.JPG.SVG,还有个比较新的WebP格式.▍GIF优点:GIF是动态的:支持无损耗 ...

css实现平行四边形等特殊形状文字图片倾斜

实现方法：CSS属性`transform: skew(x,y)`

示例

1.X轴倾斜，Y轴不倾斜 `transform:skew(ax) == transform:skewX(ax)`

2.X轴不倾斜，Y轴倾斜 `transform:skewY(ay)`

3.X轴、Y轴都倾斜 `transform:skew(ax,ay)`

实例

css实现平行四边形等特殊形状文字图片倾斜相关推荐

最新文章

热门文章

css实现平行四边形等特殊形状 文字图片倾斜

实现方法：CSS属性transform: skew(x,y)

示例

1.X轴倾斜，Y轴不倾斜 transform:skew(ax) == transform:skewX(ax)

2.X轴不倾斜，Y轴倾斜 transform:skewY(ay)

3.X轴、Y轴都倾斜 transform:skew(ax,ay)

实例

css实现平行四边形等特殊形状 文字图片倾斜相关推荐

最新文章

热门文章

css实现平行四边形等特殊形状文字图片倾斜

实现方法：CSS属性`transform: skew(x,y)`

1.X轴倾斜，Y轴不倾斜 `transform:skew(ax) == transform:skewX(ax)`

2.X轴不倾斜，Y轴倾斜 `transform:skewY(ay)`

3.X轴、Y轴都倾斜 `transform:skew(ax,ay)`

css实现平行四边形等特殊形状文字图片倾斜相关推荐