CSS3的几个变形案例……

简介: CSS3的几个变形案例……

CSS变形


CSS的变形包括这么几种效果,分别有平移(translate),缩放(scale),倾斜(skew),旋转(rotate),下面我们来分别看看。


01


平移(translate)


语法:transform: translate(X轴平移的像素,Y轴平移的像素)

Eg:

#div1:hover{
     transform: translate(10px,-9px);
 }


效果如图所示:

aHR0cHM6Ly9tbWJpei5xcGljLmNuL21tYml6X2dpZi9EWjlUaWF4ZFF4azN5RDM3SnFqOWljWmhuZExBdXJtb1hNVHB1QXRVakRhQTJGMUJpYTA5NjZtaDBjemM0ZTVhOGljaWFQb1Z2SFZHaWFabnJpY2FNeGtYbXdpYTR3LzY0MA.png



02


缩放(scale)


语法:transform: scale(宽度缩放值,高度缩放值)


如果参数只有一个值,默认第二个值和第一个值相等;默认值是1,0-0.99的任意一个数字可以缩小元素,大于1则会使元素放大。例如:scale(0.8),元素会缩小0.8倍,而scale(1.5)元素则会放大1.5倍。


Eg:

#div2:hover{
       transform: scale(1.2);
       }


效果图:

aHR0cHM6Ly9tbWJpei5xcGljLmNuL21tYml6X2dpZi9EWjlUaWF4ZFF4azN5RDM3SnFqOWljWmhuZExBdXJtb1hNUU94eUcyQzBNTVJMMjR2REE0UVpvTENvVUVoOGJlUEl2ZENZRHRKOGJOQnJUaWF5U3hHWUg5US82NDA.png



03


旋转(skew)


语法:transform: skew(X轴倾斜的角度,Y轴倾斜的角度);单位为deg(°)


Eg:

#div3:hover{
       transform: skew(10deg,10deg);
}


效果图:

aHR0cHM6Ly9tbWJpei5xcGljLmNuL21tYml6X2dpZi9EWjlUaWF4ZFF4azN5RDM3SnFqOWljWmhuZExBdXJtb1hNeGM1REFpY0ZFSUpYTzIyQno0VWVkSDA4ejFPN3JEYlBjaWExcGFYdmNlWjdnaWJ3aWFHMWlidDlZYUEvNjQw.png



04


旋转(rotate)


语法:transform: rotate(旋转的度数);其中参数的单位是deg(°)。


Eg:

#div4:hover{
       transform: rotate(20deg);
}


效果如图:

aHR0cHM6Ly9tbWJpei5xcGljLmNuL21tYml6X2dpZi9EWjlUaWF4ZFF4azN5RDM3SnFqOWljWmhuZExBdXJtb1hNRE9HemljaE04OFB2YjJTcE1hR1NBSEZCMEMzVFY3UGljdE5pYUZlUmhwVDZzMnZvTTBpYkxiMTkyZy82NDA.png

目录
相关文章
|
15天前
|
前端开发
css3 纯代码案例
css3 纯代码案例
23 0
|
22天前
|
存储 前端开发 算法
【正在完善】高级CSS特效解析其示范案例
【正在完善】高级CSS特效解析其示范案例
118 0
|
26天前
|
前端开发
CSS总结笔记+案例(下)
CSS总结笔记+案例
33 1
|
26天前
|
前端开发 Python
CSS总结笔记+案例(上)
CSS总结笔记+案例
26 1
|
1月前
|
JavaScript 前端开发 数据安全/隐私保护
jQuery选择器-第2次课-大部分跟CSS3选择器类似-几乎没有学习成本-附案例-作业等
jQuery选择器-第2次课-大部分跟CSS3选择器类似-几乎没有学习成本-附案例-作业等
10 0
|
3月前
|
前端开发
CSS 支持伪类和伪元素,可用于指定文档中不同状态的样式。具体案例解析
CSS 支持伪类和伪元素,可用于指定文档中不同状态的样式。具体案例解析
23 2
|
3月前
|
前端开发 UED
CSS 支持动画效果,可以通过关键帧动画或过渡动画实现动态效果。具体案例解析
CSS 支持动画效果,可以通过关键帧动画或过渡动画实现动态效果。具体案例解析
39 1
|
5月前
|
前端开发 JavaScript 开发者
|
5月前
|
JavaScript 前端开发
jQuery工具方法&CSS属性及方法(详细方法介绍及案例)
jQuery工具方法&CSS属性及方法(详细方法介绍及案例)
39 0
|
6月前
CSS3【display: flex;】自适应布局案例
CSS3【display: flex;】自适应布局案例
43 0

相关产品

  • 云迁移中心