document.write('
') 使Div倾斜的方法 - 手工SEO

手工SEO

手工SEO首页 帝国教程 正文

使Div倾斜的方法

手工SEO 2019-10-01 02:07:11 帝国教程 191℃ 手工SEO
transform: skew() 说明 skewX(),skewY(),skew()函数,都是指定要素倾斜变形时使用。
属性值 skew(X角度,Y角度) 根据指定的X,Y轴的两个角度进行倾斜变形。 第一个值为X轴倾斜。 第二个值为Y轴倾斜,第二个值可以省略,省略的时候,Y轴不倾斜。
skewX(角度) X轴以指定的角度进行倾斜。
skewY(角度) Y轴以指定的角度进行倾斜。
默认值 none。 实例代码

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 

 

"">

<html xmlns="">

<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<title>skew</title>

<style>

p.prefix_sample1, p.prefix_sample2, p.prefix_sample3 {background-color:limegreen;}

p.prefix_sample1 img {

-moz-transform: skewX(20deg);

-webkit-transform: skewX(20deg);

-o-transform: skewX(20deg);

-ms-transform: skewX(20deg);

}

p.prefix_sample2 img {

-moz-transform: skewY(20deg);

-webkit-transform: skewY(20deg);

-o-transform: skewY(20deg);

-ms-transform: skewY(20deg);

}

p.prefix_sample3 img {

-moz-transform: skew(-20deg,-20deg);

-webkit-transform: skew(-20deg,-20deg);

-o-transform: skew(-20deg,-20deg);

-ms-transform: skew(-20deg,-20deg);

}

</style>

 

</head>

 

 

 

<body>

<p class="prefix_sample1">

skewX(20deg)<br>

<img src="5.jpg">

</p>

 

<p class="prefix_sample2">

skewY(20deg)<br>

<img src="5.jpg">

</p>

 

<p class="prefix_sample3">

skew(-20deg,-20deg)<br>

<img src="5.jpg">

</p>

</body>

</html>

 

实例图

使Div倾斜的方法

上一篇:压缩FLASH网络广告大小的方法

下一篇:怎么去掉li标签前面的点?

网站分类
标签列表