transform (2D conversion)
In the past, image conversion relied on js, now CSS3 can do
- Flip skew()
- Move translate()
- Rotate rotate()
- Scale()
The transform of css3 is defined by a function
- translate(x,y)
Along the xy axis, can move by a margin before, it is now advanced, moved rightward 30px: Transform: Translate (30px);
一般用于，指向时配合阴影模拟浮起. The code is not difficult.
Expansion: Center display, when the transform:translate() parameter is a percentage, it uses itself as a percentage.
- rotate(20deg)
Rotate 20°. There is nothing to say. All clockwise
使用场景比较少吧。。。
- scale(x,y), xy axis are scaled separately
Everyone understands a parameter. The parameter is a number, and a percentage is not acceptable. If
一般用于配合阴影指向放大，类似于元素原地凸起it is bigger, it feels like closer to you
(remember to set the z-index, and the text inside will be enlarged accordingly)
eg:
div:hover{
transform:scale(1.3) }
div {
transition : all 1s } //设置所有标签动画一秒
- skew(40deg) Flip according to the horizontal and vertical axis
The first value is horizontal, the second is vertical, and only one value is the horizontal axis.
很少用到The brain supplement picture is the appearance of the palm facing you, turning left and right and up and down.
Here comes the point~ Animation transition time
Front-end visual optimization (3) CSS animation transition, transition property
transition property, transition when responding to the change of CSS,
default for all CSS properties, you can also specify what property to take and how much time to transition.
eg:
div {
ransition:width 2s, height 2s, background-color 2s, transform 2s;
}
// The properties are separated by commas.
// transform refers to all transform properties.
记得！！这个是写在元素本体上的，而不是本体:hover上
There is also a delay for the start, or it can be fast and then slow. It is not commonly used, just remember not to remember it, and then Baidu when you need it.