CSS中3D变换和gradient效果

Posted 2022-08-13 公众号_前端每日技巧

radial-gradient

radial-gradient()是径向渐变，指的是一个中心点向四周扩撒的渐变效果，其中包括波的扩散和光的扩散中都有径向渐变的特征。

css中我们使用radial-gradient()函数表示径向渐变，语法比较复杂，所以我们可以从简单的径向渐变开始看：

.warpper
    width: 250px;
    heigth: 125px;
    background-image: radial-gradient(blue, red);

上面展示的是一个椭圆渐变效果，径向渐变的方向由中心往外部的，默认终止于元素的边框内边缘。其实所有径向渐变语法都是围绕改变径向渐变的半径值、中心点坐标、渐变颜色的起点和终点展开的。

如果我们希望代码显示的径向渐变只有半径只有50px, 垂直半径还是默认大小，则可以设置50px 50%作为第一个参数，径向代码就可以这样写：

radial-gradient(50px 50%, black, red);

如果我们想径向的水平半径和垂直半径都是50px，就不需要设置50px 50px，直接设置50px就可以了，当作圆形径向渐变处理就行：

radial-gradient(50px, black, red);

我们需要注意的是，水平半径和垂直半径合一起写的时候，只能是长度值，不能是百分比值，但是如果想要使用百分比值，就必须给出两个值：

radial-gradient(40% 40%, black, red);

如果我们想要改变中心点位置，我们可以使用​​at <position>​​语法，如果渐变的中心点不在元素的中心位置，又希望渐变的结束位置在元素的某一侧边缘或某一个边角，那么我们可以使用​​<extent-keyword>​​数据类型。这个数据类型中有4个关键字，分别是​​closest-side​​、​​closest-corner​​、​​farthest-side​​、​​farthes-corner(默认值)​​,它们分别表示渐变中心距离容器最近的边作为终止位置、渐变中心距离容器最近的角作为终止位置、渐变中心距离容器最远的边作为终止位置、渐变中心距离容器最远的角作为终止位置。

conic-gradient

conic-gradient()表示锥形渐变，虽然很实用，但是兼容性不是很好，所以一般用于移动端项目和后台项目中使用。锥形渐变主要由3部分组成，包括起始角度、中心位置、角渐变断点，其中起始角度和中心位置都可以省略的。

角渐变断点的数据类型是​​<angular-color-stop-list>​​。角渐变断点与线性渐变和径向渐变的区别在于角渐变断点不支持长度值，支持的是角度值。角渐变断点中设置的角度是一个相对角度值，最终渲染的角度值是设置的角度值和起始角度值累加的值。

锥形渐变可以很容易就实现饼状图效果：

.wrapper 
    width: 100px;
    height: 100px;
    border-radius: 50%;
    background: conic-gradient(red 40%, blue 0deg 75%, black 0deg);

其中0deg换成0%效果是一样的。

线性渐变和径向渐变以及锥形渐变都有对应的重复渐变函数，就是在各自函数的前面添加​​repeating-​​前缀，无论是重复性线性渐变、重复径向渐变还是重复又锥形渐变，它们的语法和对应的非重复渐变语法是一模一样的，其中区别就在渲染表现上，非重复渐变的起止颜色位置如果是0%和100%，则可以省略，而对于重复渐变，起止颜色的位置需要明确定义。

css 3D

CSS 3D变换函数包括translateX()、translateY()和translateZ()，其中translateX()和translateY()属于2D变化，而translateZ()属于3D变换，其中CSS缩放变换函数包括scaleX()、scaleY()和scaleZ(),scaleZ属于3D变化，而scaleX()和scaleY()属于2D变换。CSS3D斜切变换没有3D函数，也就是说skewZ函数是不存在的，自然也不存在skew3d()函数。rotateX()、rotateY()和rotateZ()都属于3D变换。

3D中还有perspective属性，​​perspective​​属性决定了看到的画面是二维还是三维的。我们也可以通过​​translateZ()​​函数来控制元素在视觉上的远近距离，如果我们设置容器元素的​​perspective​​属性值为155px;

.warpper 
   perspective: 155px;

其中会有几种情况：

当我们给子元素设置的translateZ()函数值越小，我们就会看到子元素的视觉大小越小，同理当我们设置子元素的函数值越大，我们看到的子元素的视觉就会越小。同理我们可以得到越大则视觉大。

当我们设置的translateZ()的值超过了我们设置的大小，我们就发现我们看不到该元素了。

perspective透视点有两种写法，一种是设置在3D渲染元素的共同父元素上；一种是设置在当前3D渲染元素上。

//第一种
.wrapper 
    perspective: 254px;

//第二种
.wrapper1 
    transform: perspective(254px) rotateX(22deg);

​​perspective-origin​​语法是​​perspective-origin:<position>​​,属性的初始值是50% 50%，表示默认的透视点是舞台或元素的中心。但是如果我们需要设置变换元素不在舞台中心或者透视角偏上或者偏下，我们就可以设置​​perspective-origin​​属性值。

当我们设置perspective-origin：25% 75%就是一个立方体应用效果图。

​​transform-style: preserve-3d​​支持两个关键属性值，​​flat​​和​​preserve-3d​​,项目中我们可以这样书写：、

transform-style: preserve-3d;
transform-style: flat;

​​flat​​是默认值在3D变换的元素位于舞台或元素的平面上，把三维空间压缩在舞台元素的二维空间中。

​​preserve-3d​​应用于3D变换元素位于三维空间中，更加接近3D的表现形式。

​​backface-visibility​​属性语法可以接收​​hidden​​和​​visible​​两个值，其中默认值为​​visible​​，表示元素翻转时背面时可见的，而​​hidden​​表示元素翻转时背面时不可见的。

3D变换除了用来实现3D效果，还可以用来开启GPU加速。​​transform: translate(5px, 0)​​或者​​transform: translate3d(-55px, 0, 0)​​,使用时因为该函数会开启GPU加速，所以translate3d()函数的变换效果性能更高。2D旋转性能本来很高，所以不需要去开启GPU加速，因为GPU的加速会增加移动设备电池寿命和内存的使用。所以我们在2D变换中尽可能使用2D函数，不去使用3D来进行GPU加速。