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的其他动画,我们下期在分享,今天太忙啦~


相关文章
|
2月前
|
前端开发
CSS实现充电效果案例
CSS实现充电效果案例
69 1
|
1月前
|
前端开发 JavaScript
JavaScript动态渲染页面爬取——CSS位置偏移反爬案例分析与爬取实战
JavaScript动态渲染页面爬取——CSS位置偏移反爬案例分析与爬取实战
|
4月前
|
编解码 前端开发 容器
CSS Flex布局实战案例:构建响应式卡片组件
【7月更文挑战第17天】通过上述步骤,我们成功地使用CSS Flex布局构建了一个响应式的卡片组件。Flexbox不仅简化了布局代码,还让我们能够轻松实现复杂的布局效果,如响应式设计。在实战中,掌握Flexbox将大大提高前端开发的效率和网页布局的质量。希望这个案例能够帮助你更好地理解和应用Flexbox布局。
|
6月前
|
前端开发 UED
【专栏:CSS 进阶篇】CSS3 新特性:过渡、动画与变形
【4月更文挑战第30天】CSS3的过渡、动画和变形三大特性为网页设计注入活力,创造生动丰富的用户体验。过渡提供平滑效果,常用于按钮点击等;动画实现复杂动态效果,适用于滚动字幕等;变形允许元素几何变换,如旋转和缩放。实际应用包括动态导航菜单、图片轮播和加载动画。然而,需注意浏览器兼容性、性能优化和设计平衡。掌握这些特性,将为网页设计带来更多创新可能。
153 1
|
6月前
|
前端开发 JavaScript 容器
CSS属性:定位属性+案例讲解:博雅互动 前端开发入门笔记(五)
CSS属性:定位属性+案例讲解:博雅互动 前端开发入门笔记(五)
54 1
|
6月前
mvc.net分页查询案例——mvc-paper.css
mvc.net分页查询案例——mvc-paper.css
|
6月前
|
前端开发
CSS总结笔记+案例(下)
CSS总结笔记+案例
59 1
|
6月前
|
前端开发
css3 纯代码案例
css3 纯代码案例
63 0
|
6月前
|
存储 前端开发 算法
【正在完善】高级CSS特效解析其示范案例
【正在完善】高级CSS特效解析其示范案例
160 0