css旋转45度_css 渐变过渡2D

一、过渡属性 transition

css3的transition允许css的属性值在一定的时间区间内平滑地过渡。这种效果可以在鼠标划过、单击、获得焦点或对元素任何改变中触发，并圆滑地以动画效果改变CSS的属性值

过渡属性需要触发事件，如：hover（鼠标划过事件）

1. transition-property：检索或设置对象中的参与过渡的属性

说明：属性值可以单独设置否个属性，也可以设置多个属性 width，height； 还可以设置为all（默认值）代表所有属性

2. transition-duration：检索或设置对象过渡的持续时间

说明：设置过度时间（s, ms） 1s = 1000ms

3. transition-delay：检索或设置对象延迟过渡的时间

说明：设置延迟过度时间（s, ms） 属性值为正值的时候是延迟执行过渡效果，为负值的时候是提前只想过渡效果；

4. transition-timing-function：检索或设置对象中过渡的动画类型

说明：

linear 匀速

ease（默认值） 逐渐慢下来

ease-in 加速

ease-out 减速

ease-in-out 先加速后减速

贝塞尔曲线网址：cubic-bezier.com

复合式写法：transition:all 2s 1s linear ;

transition: 2s linear 1s all ;

说明：当使用复合式写法的时候，过度时间和延迟时间的顺序是不能互换的，第一个值代表过度时间，第二个值代表延迟时间；

注：哪个元素发生变形，就把过渡属性添加给谁； 建议写给元素初始的效果里；

二、2D transform

transform翻译成汉语具有"变换"或者"改变"的意思。通过此属性具有非常强大的功能，比如可以实现元素的位移、拉伸或者旋转等效果最能体现transform 属性强大实力的是实现元素的3D变换效果。

2D功能函数：

1、2D位移 translate()

说明：translate(tx) 当参数设置一个值的时候，代表水平方向的位移；

translate(tx，ty) 第一个值代表水平方向的距离，第二个值 垂直方向的距离；

translate(tx，ty, tz) 第一个值代表水平方向的距离，第二个值 垂直方向的距离.第三个值 沿Z轴移动（3D）

translateX(tx) 指定方向设置位移 沿X轴移动

translateY(ty) 指定方向设置位移 沿Y轴移动

translateZ(tz) 指定方向设置位移 沿Z轴移动 ( 3D)

当属性值为正值时 代表的是向右或者向下移动，当为负值的时候 代表 向左或向上移动

说明：属性值可以用px 也可以用%（百分比大小的参照物是元素的宽高）

说明：translate（）位移的效果和定位里的relative的效果是类似的，都是在当前位置进行位移的，对其元素的布局是没有影响的，原来的位置的保留的。

2、2D缩放scale()

说明： 属性值代表的是倍数，是不用加单位； 0——1 之间是 缩小的效果， 大于1的时候都是放大效果；

默认值 是 1；

scale( 值1 ) 代表水平和垂直都放大或者缩小

scale( 值1，值2 ) 值1： 水平方向的缩放大小 值2 ：垂直方向

属性值可以设置为负值，但是很少用；

scaleX（值） 水平方向的缩放比例

scaleY（值） 垂直方向的缩放比例

scaleZ（值） Z轴方向的缩放比例 （3D）

3、2D旋转让rotate()

说明: 属性值的单位是度（deg）

rotate() 沿着中心点旋转； 只能放一个属性值 ，正值：顺时针旋转； 负值： 逆时针旋转；

rotateX() 沿X轴旋转

rotateY() 沿Y轴旋转

rotateZ() 沿Z轴旋转 （3D）

4、2D倾斜 skew()

说明：属性值的单位是度（deg） ；属性值为正值：向左 或向上倾斜 负值：向右或向下倾斜

skew( 值1 ) 一个值的时候 代表 沿X轴倾斜

skew( 值1，值2) 值1： 沿X轴的倾斜 值2 ：沿Y轴的倾斜

skewX（） 沿X轴的倾斜

skewY（） 沿Y轴的倾斜

说明：元素通过 transform进行变形时，都是对其他元素的布局不产生影响的。不脱离文档流。

变形时元素默认情况下都是沿着元素的中心点去变形的

当使用复合式写法的时候，他们顺讯不同，会导致结果不一样，他们执行的顺讯是从后向前解析的。

transform: translate(100px) rotate(60deg);

5、原点设置属性：transform-origin

定义：transform-origin是变形原点，也就是该元素围绕着那个点变形或旋转，该属性只有在设置了transform属性的时候起作用；

说明：transform-origin：值1 值2 ； 值1： 水平 值2： 垂直

px % left top right bottom ;

6、backface-visibility ：隐藏被旋转的 div 元素的背面

backface-visibility:visible;可见 （默认值）

backface-visibility:hidden;不可见

backface-visibility 的bug : 如果元素翻转后结束后显示在上一层，给他加一个背景色就可以解决了。

三、css3 渐变

概念：CSS3 渐变（gradient）可以让你在两个或多个指定的颜色之间显示平稳的过渡。 以前，你必须使用图像来实现这些效果，现在通过使用 CSS3 的渐变（gradients）即可实现。此外，渐变效果的元素在放大时看起来效果更好，因为渐变（gradient）是由浏览器生成的。

线性渐变：

语法：

background-image: linear-gradient(direction, color-stop1, color-stop2, ...);

说明：

direction：默认为to bottom，即从上向下的渐变；

还可以设置为度数。自上向右 （0度 —— 90度的变化） -- 旧的标准是相反 自右而上 （ 90—— 0）

stop：颜色的分布位置，默认均匀分布，例如有3个颜色，各个颜色的stop均为33.33%。

径向渐变：

语法：background-image: radial-gradient(shape size at position, start-color, ..., last-color);

position：渐变起点的位置，可以为百分比，默认是图形的正中心。

shape：渐变的形状，ellipse表示椭圆形，circle表示圆形。默认为ellipse，如果元素形状为正方形的元素，则ellipse和circle显示一样。

size：渐变的大小，即渐变到哪里停止，它有四个值。 closest-side：最近边； farthest-side：最远边； closest-corner：最近角； farthest-corner：最远角。