CSS3的几个变形案例……

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


CSS变形

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

01

平移(translate)

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

Eg:

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

效果如图所示:

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);
       }

效果图:

03

旋转(skew)

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

Eg:

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

效果图:

04

旋转(rotate)

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

Eg:

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

效果如图:

关于CSS的其他动画,我们下期在分享,今天太忙啦~


目录
相关文章
|
14天前
|
前端开发 UED
【专栏:CSS 进阶篇】CSS3 新特性:过渡、动画与变形
【4月更文挑战第30天】CSS3的过渡、动画和变形三大特性为网页设计注入活力,创造生动丰富的用户体验。过渡提供平滑效果,常用于按钮点击等;动画实现复杂动态效果,适用于滚动字幕等;变形允许元素几何变换,如旋转和缩放。实际应用包括动态导航菜单、图片轮播和加载动画。然而,需注意浏览器兼容性、性能优化和设计平衡。掌握这些特性,将为网页设计带来更多创新可能。
|
14天前
|
前端开发 JavaScript 容器
CSS属性:定位属性+案例讲解:博雅互动 前端开发入门笔记(五)
CSS属性:定位属性+案例讲解:博雅互动 前端开发入门笔记(五)
22 1
|
14天前
mvc.net分页查询案例——mvc-paper.css
mvc.net分页查询案例——mvc-paper.css
6 0
|
14天前
|
前端开发
css3 纯代码案例
css3 纯代码案例
36 0
|
14天前
|
存储 前端开发 算法
【正在完善】高级CSS特效解析其示范案例
【正在完善】高级CSS特效解析其示范案例
129 0
|
14天前
|
前端开发
CSS总结笔记+案例(下)
CSS总结笔记+案例
44 1
|
14天前
|
前端开发 Python
CSS总结笔记+案例(上)
CSS总结笔记+案例
38 1
|
14天前
|
JavaScript 前端开发 数据安全/隐私保护
jQuery选择器-第2次课-大部分跟CSS3选择器类似-几乎没有学习成本-附案例-作业等
jQuery选择器-第2次课-大部分跟CSS3选择器类似-几乎没有学习成本-附案例-作业等
19 0
|
6月前
|
前端开发
CSS 支持伪类和伪元素,可用于指定文档中不同状态的样式。具体案例解析
CSS 支持伪类和伪元素,可用于指定文档中不同状态的样式。具体案例解析
30 2
|
1天前
|
存储 JavaScript 前端开发
笔.COOL,一个功能完备、使用便捷的在线HTML/CSS/JS以及Vue编辑器和作品分享平台
笔.COOL是一个新兴的在线 HTML/CSS/JS 及 Vue 编辑器,提供实时预览和云端存储功能。用户可以随时随地编写和保存代码,同时分享作品给他人预览和学习。它也是一个实用的 BUG 复现工具,支持嵌入编辑器到博客,促进代码交流。社区活跃,适合开发者展示作品、获取灵感和学习。