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

文章目录

• 一、transform的基础知识
• • • • transform可以分为四类变形：
      • • （1）第一类变形 旋转变形 rotate()
        • （2）第二类变形 缩放变形 scale()
        • （3）第三类变形 平移变形 translate()
        • （4）第四类变形 扭曲变形 skew()
• 二、示例
• • 1.rubberBand
  • 2.shake
  • 3.tada
• 总结

一、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;
}

总结

本次带大家简单了解了一下transform中的2d变形效果，希望可以给大家带来思路上的灵感。