css3中斜()属性的用法

这篇文章主要介绍了css3中斜()属性的用法,具有一定借鉴价值,需要的朋友可以参考下。希望大家阅读完这篇文章后大有收获。下面让小编带着大家一起了解一下。

在css3中,斜()是一个倾斜属性,需要属和变换性一起使用,可以改变元素在页面中的形状,让元素沿着X和Y轴进行2 d倾斜转换;语法”变换:斜(X, Y)”。

<强> css3倾斜属性斜()

刚开始接触css3的2 d变换属性,就被这个斜()搞的一头雾水,不知道具体是怎么变化的!

研究了一会才发现,css3的斜切坐标系和数学中的坐标系完全不一样(设置斜切原点为左上角)

变换属性应用于元素的2 d或3 d转换。这个属性允许你将元素旋转,缩放,移动,倾斜等。

而倾斜(x-angle角度Y):定义沿着X和Y轴的2 d倾斜转换。

<强>示例:

& lt; style> 　　div { 　　,,,,,,,,,,,宽度:,200 px; 　　,,,,,,,,,,,身高:,200 px; 　　,,,,,,,,,,,的转变:all  2 s; 　　,,,,,,,,,,,保证金:,150 px 汽车; 　　,,,,,,,} 　　.div1 { 　　,,,,,,,背景颜色:,# f00; 　　,,,} 　　.div2 { 　　,,,,,,,背景颜色:,# 0 f0; 　　,,,} 　　& lt;/style> 　　& lt; body> 　　,,,& lt; div 类=癲iv1"祝辞& lt;/div> 　　,,,& lt; div 类=癲iv2"祝辞& lt;/div> 　　& lt;/body>

下面我们设置鼠标经过时的倾斜(0,30度)属性

.div1: hover  { 　　,,,,,,,,,,,变换:斜(0,30度); 　　,,,,,,,,,,,transform-origin:, left 最高; 　　,,,,,,,}

移入前

移入后

通过两幅图可以看的出,斜(0,30度),是按照水平方向Y轴,顺时针旋转

下面我们设置鼠标经过时的倾斜(30度,0)属性

.div2: hover  { 　　,,,,,,,,,,,变换:斜(30度,0); 　　,,,,,,,,,,,transform-origin:, left 最高; 　　 　　,,,,,,,}

移入前

移入后

通过两幅图可以看的出,斜(30度,0),是按照垂直方向X轴,逆时针旋转

感谢你能够认真阅读完这篇文章,希望小编分享css3中斜()属性的用法内容对大家有帮助,同时也希望大家多多支持,关注行业资讯频道,遇到问题就找,详细的解决方法等着你来学习!

css3中斜()属性的用法