css►mobile

css2D、3D转换

CSS3

过渡

过渡的属性

  • 如果两个状态发生改变，没有过渡，效果是瞬间变化的

  • 如果加上了过渡，那么这个过程就会有动画的效果。

  • 整个状态变化的过程是由浏览器来完成的，我们只需要关注开始状态与结束状态即可。

1
2
3
4
5
6
7
8
9
10
11
12
13
/*transition-property：设置过渡属性
/*也可以是width,height*/
transition-property:all;

/*transition-duration:设置过渡时间*/
transition-duration:1s;

/*transition-delay：设置过渡延时*/
transition-delay:2s;

/*transition-timing-function:设置过渡的速度*/
/*linear，ease，ease-in，ease-out，ease-in-out， steps(10)*/
transition-timing-function:linear;

属性合写

1
2
/* 属性 时间 延时 速度 */
transition: width 1s 3s linear;

过渡的注意点：

  • 过渡必须要有两个状态的变化。
  • 过渡可以写在A状态，也可以写在B状态，但是如果写在B状态，那么回来的时候，就没有过渡效果了。

2D转换

transform: 转换，是CSS3最具颠覆性的几个特性之一，既可以用于2D转换，也可以用于3D转换。

transform：2D转换，元素在平面上实现移动、旋转、缩放、斜切等操作

translate平移

1
2
3
4
transform: translateX(100px);
transform: translateY(100px);
transform: translate(100px, 100px);
transform: translate(50%, 50%);

注意：

  • translate的值可以是px，也可以是百分比，如果是百分比，那么参照的是自身的宽高。
  • translate移动的元素并不会影响其他盒子，类似于相对定位。

scale缩放

1
2
3
transform: scaleX(0.5);/*让宽度变化*/
transform: scaleY(0.5);/*让高度变化，注意不能写多个transform，不然会覆盖。*/
transform: scale(0.5);/*让宽度和高度同时变化*/

注意：

  • scale接收的值是倍数，因此没有单位
  • scale可以是一个值，如果是一个值，不是说仅仅缩放宽度，高度也会等比例的缩放。
  • 可以通过transition-origin设定旋转原点

rotate旋转

1
2
transform: rotate(360deg);//旋转360度
transform: rotate(-360deg);//逆时针旋转360度

注意：

  • 单位是deg，角度，不是px
  • 正值顺时针转，负值逆时针转
  • 可以通过transform-origin设定旋转原点

skew斜切(变形)

skew在实际开发中，是用的最少的一个属性。一般来说，x和y只会倾斜其中的一个

1
2
3
4
/*在水平方向倾斜30deg*/
transform: skewX(30deg);
/*在垂直方向倾斜30deg*/
transform: skewY(30deg);

transform-origin转换原点

通过transform-origin可以设置转换的中心原点。

1
2
transform-origin: center center;
transform-origin: 40px 40px;

转换合写问题

1
transform:translateX(800px) scale(1.5) rotate(360deg) ;

  • transform属性只能写一个，如果写了多个会覆盖

  • transform属性可以连写，但是要注意rotate会影响坐标轴的改变

  • 如果多个场景下面有2D转换的情况下，需要复制前面已经存在的2D转换

3D转换

transform:不仅可以2D转换，还可以进行3D转换。

坐标轴

用X、Y、Z分别表示空间的3个维度，三条轴互相垂直。注意+Y是向下的。

坐标轴

perspective透视

电脑显示屏是一个2D的平面，因为我们看不出来旋转的方向，通过perspective属性，可以定义3D 元素距视图的距离，单位是px。

说白了，设置了perspective属性后，就有了近大远小的效果了，在视觉上，让我们能看出来透视的效果。

注意：当为元素定义 perspective 属性时，其子元素会获得透视效果，而不是元素本身。

1
perspective：500px;

rotate旋转

1
2
3
4
transform: rotate(45deg);// 让元素在平面2D中旋转
transform: rotateX(45deg);// 让元素沿着X轴转45度
transform: rotateY(45deg);// 让元素沿着Y轴转45度
transform: rotateZ(45deg);// 让元素沿着Z轴转45度

translate平移

1
2
3
4
5
6
/*沿着X轴的正方向移动45px*/
transform: translateX(45px);
/*沿着Y轴的正方向移动45px*/
transform: translateY(45px);
/*沿着Y轴的正方向移动45px*/
transform: translateZ(45px);

transform-style

transform-style 属性规定如何在 3D 空间中呈现被嵌套的元素。注意这个属性只能给父元素添加。

1
2
flat:默认值，2d显示
preserve-3d: 3d显示

transform-style: preserve-3d与perspective的区别

1
2
3
4
5
perspective透视：透视只是相当于设置了一个距离，辅助我们查看3D效果的工具，本质盒子最后显示时的变形，通常给需要透视的场景添加。

transform-style: preserve-3d:给父盒子添加，让子元素保留3D的位置，说白了，只有设置了preserve-3d，这个元素才能被称之为3d元素。

一个3d元素可以没有perspective，但是不能没有transform-style