CSS3的几个变形案例……

大家好，欢迎来到雄雄的小课堂，那个……辣椒酱很好吃的，哈哈哈哈！今天给大家分享的内容是利用CSS制作网页的动画。

辣椒酱：自从有了这款辣椒酱，拌饭再也不用老干妈

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

往期精彩

jsp中使用cookie时报错……

2020-11-17

Java中的TreeSet集合会自动将元素升序排序

2020-11-16

“老师，请您多关注一下我吧！！！”

2020-11-15

晨读，难道只是为了完成任务而读的吗？

2020-11-14

Vector是线程安全的？

2020-11-13

为什么要有周考？周考是用来干什么的？

2020-11-12

点分享

点点赞

点在看