CSS3属性transform之2D转换、transition过度、线性渐变

摸鱼小队

已于 2022-07-19 01:07:15 修改

阅读量727

点赞数

文章标签： html css3 前端

于 2022-07-17 23:42:04 首次发布

本文链接：https://blog.youkuaiyun.com/m0_46324704/article/details/125838216

版权

分享css的2d转换、过度、线性渐变的基本使用方法

前言

记录每天学习前端的一个小知识，transform的2D转换、transition过度和线性渐变

transform属性可以将指定的盒子应用2D转换或3D转换（只限于块级元素），CSS的transform属性允许元素缩放，倾斜，或平移指定的元素。

translate(x , y); 以元素本身中心点，进行x轴和y轴平移，x为负值向右，反之向左平移；y为负值向上，反之向下。当translate只有一个参数是，必定是x的值（单位可以是px，或百分比等）
translateX(x)；以元素本身中心的进行X轴平移
translateY(y)；以元素本身中心的进行Y轴平移

rotate(度数); 元素围绕元素中心旋转，单位deg（度数）；也可以使用turn，1turn代表一圈

skew(ax, ay); ax代表x轴的倾斜度数，ay代表y轴的倾斜度数。写一个参数或者两个参数指定元素以元素中心的位置向x或者y轴的倾斜角度（单位deg）。当只写一个参数的时候代表x轴的倾斜角度
skewX(deg)；元素以元素的中心点向X轴的倾斜角度
skewY(deg)；元素以元素的中心点向y轴的倾斜角度

过度效果可以让元素切换不同状态的期间有一个过度效果。
transition：过度属性过度时间；可以指定一个属性过度。然后设置过度时间（单位：s (秒)）； 一般过度属性写all或者省略，省略就代表默认为all；all代表所有属性。过度时间后面还可以设置过度效果的速度。linear代表匀速，还有其他的可以查阅文档
例如：一个hover效果，元素从蓝色变成红色，正常是直接变成红色。而添加过度后就是从蓝色变成红色会有一个变换过程，也就是过度效果

线性渐变是用于background-img属性的，通过linear-gradient来添加渐变背景色
linear-gradient（[位置，color1，color2....]）位置可以是方位名词或者是度数，color设置颜色。颜色后面可以跟随百分比，代表颜色所占比列
例如设置一个渐变背景色background-image: linear-gradient(120deg, red, blue);