CSS学习12

最新推荐文章于 2024-08-24 13:47:49 发布

aneyal

最新推荐文章于 2024-08-24 13:47:49 发布

阅读量413

点赞数 2

分类专栏：前端学习文章标签： css 学习 css3 前端

本文链接：https://blog.csdn.net/aneyal/article/details/123616607

版权

前端学习专栏收录该内容

47 篇文章 2 订阅

订阅专栏

2D变形

CSS3新特性

使用transform，可以实现元素的位移、旋转、倾斜、缩放，甚至支持矩阵方式。

位移

属性值可以是translate(x,y)，表示移动，x、y表示在x轴、y轴上移动的距离，单位为px

也可以使用translateX（）表示在X轴上移动的距离，使用translateY（）表示在 Y轴上移动的距离

translate（）里面如果是百分比，移动时移动的是自己大小的百分比

缩放

属性值也可以是scale(x,y)，表示缩放，x、y表示水平、垂直缩放的系数，1表示不变，如果只有一个参数，则表示宽度和高度都缩放。

旋转

属性值也可以是rotate(deg)，deg是度数，单位是度（即deg），值为正表示顺时针，负表示逆时针

默认情况下旋转的中心点是元素的中心点，可以通过transform-origin设置旋转的中心点，其值可以是left、top、right、bottom，也可以是精确像素。

例如transform-origin：20px 30px；表示旋转中心点在距离上边20px,距离左边30px的地方

倾斜

使用skew(deg,deg)，两个参数表示向x、y方向倾斜的度数，可以为负值。正值往左往上，负值往右往下。第二个参数不设置时默认为0

让定位的盒子居中对齐

/*水平居中*/
position:absolute;
left:50%;
transform:translate(-50%);
/*垂直居中*/
top:50%;
transform:translateY(-50%);

3D变形

也是使用transform属性

坐标：

rotateX（）

沿着中心x轴立体旋转

属性值选择rotateX（deg）

可以通过transform-origin属性设置轴的位置

rotateY（）

沿着中心Y轴立体旋转

属性值选择rotateY（deg）

可以通过transform-origin属性设置轴的位置

rotateZ（）

沿着中心Z轴立体旋转

属性值选择rotateZ（deg）

可以通过transform-origin属性设置轴的位置

效果类似于普通旋转

透视

透视可以将一个2D平面在转换的过程中呈现3D效果

原理：近大远小

浏览器透视：将近大远小的所有图像透视在屏幕上

使用perspective属性实现，设置给父元素，属性值越大，效果越不明显

perspective属性即视距，模拟眼睛到屏幕的距离，表示眼睛和XY平面之间的距离

移动

沿x轴和沿Y轴移动和2D移动一样

沿Z轴移动使用translateZ(z)，z表示移动的距离，可以为负，单位为px，为负值表示向负方向移动。

沿Z轴移动需要和透视配合，效果为大小变化。translateZ(z)中的z表示物体距离XY平面的距离，用来控制物体近大远小的效果，越大物体越大，z大于perspective的值时，看不到了

可以使用translate3d(x,y,z)综合描写3D移动。其中x,y可以是px，也可以是百分数，但z只能是px。

移动之后要回到原位置则使用translate3d(0,0,0），这也说明移动时的参照点始终是最初始的地方

backface-visibility

这个属性定义当元素不面向屏幕时是否可见。

实现图片翻转

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style>
			div{
				width: 200px;
				height: 200px;
				margin: 100px auto;
				position: relative;
				
			}
			img{
				width: 200px;
				height: 200px;
				position: absolute;
				top: 0;
				left: 0;
				transition: all 2s;
			}
			img:first-child{
				z-index: 1;
				/* 不是正面对向屏幕，则隐藏 */
				backface-visibility:hidden;
			}
			div:hover img{
				transform: rotateY(180deg);
			}
			
		</style>
	</head>
	<body>
		<div>
			<img class="first" src="img/i1.jpg">
			<img class="last" src="img/i2.jpg" >
		</div>
	</body>
</html>

动画

CSS3新特性，可以通过设置多个节点来精确控制一个或一组动画，常用来实现复杂的动画效果

格式：animation:动画名称动画时间运动曲线何时开始播放次数是否反方向

动画名称是自定义的，是否反方向指动画是否在下一周期逆向播放,取值有normal（正常方向）、reverse（反方向运行）、alternate（动画先正常运行再反方向运行，并且持续交替运行）、alternate-reverse（动画先反方向运行再正方向运行，并且持续交替运行）

播放次数设置为infinite表示持续运行

定义动画格式（这是单个动画）：

@keyframes 动画名称{
    from{}
    to{}
}

定义多组动画示例：

@keyframes go{
				0%{
				transform: translate3d(0,0,0);	
				}
				25%{
				transform: translate3d(800px,0,0);	
				}
				50%{
				transform: translate3d(800px,300px,0);	
				}
				75%{
				transform: translate3d(0,300px,0);	
				}
				100%{
				transform: translate3d(0,0,0);	
				}
			}

变化过程中，如果有多组变化并且都属于transform，可以写在一个transform中，并且用空格隔开

暂停动画使用animation-play-state：paused