CSS3之transform详解及示例（2d变形）

扼流挽

已于 2024-05-05 09:33:02 修改

阅读量585

点赞数 14

文章标签： css3 javascript 前端

于 2024-05-05 09:30:33 首次发布

本文链接：https://blog.csdn.net/Zbz00720/article/details/138459616

版权

本文详细介绍了CSS中的transform属性，包括旋转、缩放、平移和扭曲四种基本变形，以及通过关键帧动画实现的rubberBand、shake和tada效果示例，旨在启发读者在设计中运用这些2D变换技巧。

摘要由CSDN通过智能技术生成

文章目录

一、transform的基础知识
- - - transform可以分为四类变形：
二、示例
总结

一、transform的基础知识

变形的参考点是图形的中心点

transform-origin: X轴位置 Y轴位置;

变形只是对图形做修改，不会对盒子占据的空间做修改！
多个变形可以同时使用
transform: 变形1 变形2…;
注意：变形的前后顺序会影响最终的变形效果！！！

transform可以分为四类变形：

（1）第一类变形旋转变形 rotate()

transform:rotate();//默认是延Z轴旋转
transform:rotateX();
transform:rotateY();
transform:rotateZ();

（2）第二类变形缩放变形 scale()

transform:scale();//默认写一个值，会同时生效在X轴和轴
transform:scaleX();
transform:scaleY();

（3）第三类变形平移变形 translate()

transform:translate();//默认写一个值，会同时生效在X轴和轴
transform:translateX()
transform:translateY();

translate()如果写百分比，记住，这个百分比是参考自身的高度或者宽度

（4）第四类变形扭曲变形 skew()

transform:skew();//默认写一个值，会同时生效在X轴和轴
transform:skewX();
transform:skewY();

二、示例

本次示例并没有提供css样式

1.rubberBand

在这里插入图片描述
代码如下（示例）：

@keyframes rubberBand {
    0% { transform: scaleY(1) scaleX(1); }
    50% { transform: scaleY(0.5) scaleX(1.3); }
    60% { transform: scaleY(1.2) scaleX(0.8); }
    70% { transform: scaleY(0.6) scaleX(1.2); }
    80% { transform: scaleY(1.2) scaleX(0.8); }
    90% { transform: scaleY(0.6) scaleX(1.2); }
    100% { transform: scaleY(1) scaleX(1); }
}
.rubberBand{
    animation: rubberBand 1s ease;
}
//给要变形的盒子，添加类名就可以了

2.shake

在这里插入图片描述

代码如下（示例）：

@keyframes shake {
    0% { transform: translateX(0px) }
    10% { transform: translateX(-20px) }
    20% { transform: translateX(20px) }
    30% { transform: translateX(-20px) }
    40% { transform: translateX(20px) }
    50% { transform: translateX(-20px) }
    60% { transform: translateX(20px) }
    70% { transform: translateX(-20px) }
    80% { transform: translateX(20px) }
    90% { transform: translateX(-20px) }
    100% { transform: translateX(0px) }
}
.shake{
    animation: shake 1s ease;
}

3.tada

在这里插入图片描述

代码如下（示例）：

@keyframes tada {
    0% { transform: scale(1) rotateZ(0deg); }
    20% { transform: scale(0.8); }
    40% { transform: scale(1.1) rotateZ(-10deg); }
    50% { transform: scale(1.1) rotateZ(10deg); }
    60% { transform: scale(1.1) rotateZ(-10deg); }
    70% { transform: scale(1.1) rotateZ(10deg); }
    80% { transform: scale(1.1) rotateZ(-10deg); }
    90% { transform: scale(1.1) rotateZ(10deg); }
    100% {  transform: scale(1) rotateZ(0deg); }
}
.tada{
    animation: tada 1s;
}