css3--deformation (transform)

 

CSS3 deformation--rotate rotate()

The rotate rotate() function rotates the element relative to the origin by the specified angle parameter. It mainly operates in two-dimensional space, and sets an angle value to specify the magnitude of rotation. If this value is positive , the element is rotated clockwise relative to the origin center ; if this value is negative , the element is rotated counterclockwise relative to the origin center . As shown below:

HTML code:

<div class="wrapper">
  <div></div>
</div>

CSS code:

.wrapper {
  width: 200px;
  height: 200px;
  border: 1px dotted red;
  margin: 100px auto;
}
.wrapper div {
  width: 200px;
  height: 200px;
  background: orange;
  -webkit-transform: rotate(45deg);
  transform: rotate(45deg);
}

Deformation in CSS3 -- twist skew()

The twist skew() function can make the element appear skewed . It tilts an object at an angle around the X and Y axes at its center. This is different from the rotation of the rotate() function, which just rotates without changing the shape of the element. The skew() function does not rotate, but only changes the shape of the element.

Skew() has three cases:

1. Skew(x,y) twists the element in the horizontal and vertical directions at the same time (the X axis and the Y axis are twisted and deformed at a certain angle value at the same time);

The first parameter corresponds to the X axis and the second parameter corresponds to the Y axis. If the second parameter is not provided, the value is 0, that is, there is no bevel in the Y-axis direction.

2. skewX(x) only twists the element in the horizontal direction (X-axis twists and deforms);

3. skewY(y) only distorts the element in the vertical direction (Y-axis distortion)

Deformation in CSS3--scale scale()

Scale The scale() function  makes the element scale the object based on the center origin.

There are three cases for scaling scale:

1. scale(X,Y) scales the element horizontally and vertically at the same time (that is, the X axis and the Y axis are scaled at the same time)

2. The scaleX(x) element scales only horizontally (X-axis scaling)

3. The scaleY(y) element is only scaled vertically (Y-axis scaling)

Deformation in CSS3--displacement translate()

The translate() function can move the element in the specified direction, similar to the relative in position . Or in simple terms, using the translate() function, you can move elements from their original positions without affecting any web components on the X and Y axes.

translate We are divided into three cases:

transform: translate(50px,100px);

1. translate(x,y) moves horizontally and vertically at the same time (that is, the X axis and the Y axis move at the same time)

2. translateX(x) only moves horizontally (X-axis moves)

3. translateY(Y) only moves vertically (Y-axis moves)

Deformation in CSS3--matrix ()

matrix() 是一个含六个值的(a,b,c,d,e,f)变换矩阵，用来指定一个2D变换，相当于直接应用一个[a b c d e f]变换矩阵。就是基于水平方向（X轴）和垂直方向（Y轴）重新定位元素

transform: matrix(1,0,0,1,50,50);

CSS3中的变形--原点 transform-origin

任何一个元素都有一个中心点，默认情况之下，其中心点是居于元素X轴和Y轴的50%处。如下图所示：

在没有重置transform-origin改变元素原点位置的情况下，CSS变形进行的旋转、位移、缩放，扭曲等操作都是以元素自己中心位置进行变形。但很多时候，我们可以通过transform-origin来对元素进行原点位置改变，使元素原点不在元素的中心位置，以达到需要的原点位置。

transform-origin取值和元素设置背景中的background-position取值类似，如下表所示：

transform-origin: left top;

CSS3中的动画--过渡属性 transition-property

早期在Web中要实现动画效果，都是依赖于JavaScript或Flash来完成。但在CSS3中新增加了一个新的模块transition，它可以通过一些简单的CSS事件来触发元素的外观变化，让效果显得更加细腻。简单点说，就是通过鼠标的单击、获得焦点，被点击或对元素任何改变中触发，并平滑地以动画效果改变CSS的属性值 

在CSS中创建简单的过渡效果可以从以下几个步骤来实现：
第一，在默认样式中声明元素的初始状态样式；
第二，声明过渡元素最终状态样式，比如悬浮状态；
第三，在默认样式中通过添加过渡函数，添加一些不同的样式。

CSS3的过度transition属性是一个复合属性，主要包括以下几个子属性：

• transition-property:指定过渡或动态模拟的CSS属性

• transition-duration:指定完成过渡所需的时间

• transition-timing-function:指定过渡函数

• transition-delay:指定开始出现的延迟时间

transition-property用来指定过渡动画的CSS属性名称，而这个过渡属性只有具备一个中点值的属性（需要产生动画的属性）才能具备过渡效果，其对应具有过渡的CSS属性主要有：

div {
  width: 200px;
  height: 200px;
  background-color:red;
  margin: 20px auto;
  -webkit-transition: background-color .5s ease .1s;
  transition: background-color .5s ease .1s;
}
div:hover {
  background-color: orange; 

} 

CSS3中的动画--过渡所需时间 transition-duration

transition-duration属性主要用来设置一个属性过渡到另一个属性所需的时间，也就是从旧属性过渡到新属性花费的时间长度，俗称持续时间

div {
  width: 300px;
  height: 200px;
  background-color: orange;
  margin: 20px auto;
  -webkit-transition-property: height;
  transition-property: height;                                //过渡属性
  -webkit-transition-duration: 1s;
  transition-duration: 1s;                                      //过渡时间
  -webkit-transition-timing-function: ease-out;
  transition-timing-function: ease-out;
  -webkit-transition-delay: .2s;
  transition-delay: .2s;
}
div:hover {
  height: 100px;
} 

 

CSS3中的动画--过渡函数 transition-timing-function

transition-timing-function属性指的是过渡的“缓动函数”。主要用来指定浏览器的过渡速度，以及过渡期间的操作进展情况，其中要包括以下几种函数：

div {
  width: 200px;
  height: 200px;
  background-color: orange;
  margin: 20px auto;
  border-radius: 100%;
  -webkit-transition-property: -webkit-border-radius;
  transition-property: border-radius;
  -webkit-transition-duration: 1s;
  transition-duration: 1s;
  -webkit-transition-timing-function: ease-in-out;
  transition-timing-function: ease-in-out;
  -webkit-transition-delay: .2s;
  transition-delay: .2s;
}
div:hover {
  border-radius: 0px;
}

CSS3中的动画--过渡延迟时间 transition-delay

transition-delay属性和transition-duration属性极其类似，不同的是transition-duration是用来设置过渡动画的持续时间，而transition-delay主要用来指定一个动画开始执行的时间，也就是说当改变元素属性值后多长时间开始执行。

有时我们想改变两个或者多个css属性的transition效果时，只要把几个transition的声明串在一起，用逗号（“，”）隔开，然后各自可以有各自不同的延续时间和其时间的速率变换方式。但需要值得注意的一点：第一个时间的值为 transition-duration，第二个为transition-delay。

例如：a{ transition: background 0.8s ease-in 0.3,color 0.6s ease-out 0.3;}

.wrapper div {
  width: 200px;
  height: 200px;
  background-color: orange;
  -webkit-transition: all .28s ease-in .1s;
  transition: all .28s ease-in .1s;
}
.wrapper div:hover {
  width: 300px;
  height: 300px;
  background-color: red;
}