当前位置：首页 > article >正文

CSS学习17--CSS3 过渡、2D变形、3D变形、动画

article 2024/11/16 20:40:20

CSS3 过渡、2D变形、3D变形、动画

一、过渡
二、2D变形 transform
- 1.移动 translate
- 2.缩放 scale
- 3. 旋转 rotate
- 4. 倾斜 skew
三、3D变形
- 1. rotateX（）rotateY（） rotateZ（）
- 2. 体会透视 perspective
- 3. translateX（） translateY（） translateZ（）
- 4. 开门大吉例子
- 5. backface-visibility
四、动画
- 例子：无缝滚动

一、过渡

为元素从一种样式变为另一种样式时添加效果。

transition: 过渡属性花费时间运动曲线何时开始;
前两个值不可省略，运动曲线默认ease，合适开始默认0s立即开始可以省略。

注意：transition需要写在div里而不是hover里；多个属性设置不同时，用逗号隔开；需要描述所有属性变化时，过渡属性值为all。

<html>
	<head>
		<style>
			div {
				width: 200px;
				height: 200px;
				background-color: pink;
				transition: width 0.2s ease 0s,height 0.3s ease-in 1s;
				/* transition: all 0.6s ease 0s; */
			}
			div:hover {
				width: 300px;
				height: 300px;
			}
		</style>
	</head>
	<body>
	<div></div>
</html>

二、2D变形 transform

做元素的变形、位移、缩放，可以和transition结合使用。

1.移动 translate

用translate平移

transform: translate(x,y)

<html>
	<head>
		<style>
			div {
				width: 200px;
				height: 200px;
				background-color: pink;
				transition: all 0.5s;
			}
			div:active { /*鼠标点击没有松开鼠标，相当于点击*/
				transform: translate(100px,200px);
				transform: translate(50%,100%);
			}
		</style>
	</head>
	<body>
	<div></div>
</html>

注意：

只移动一个坐标可以把另一个坐标设为0；
也可以写成：translateX（只跟一个参数）；translateY（只跟一个参数）。

translate移动的距离如果是%，则以自己的宽度为准，而不是父亲为准。

<html>
	<head>
		<style>
			div {
				width: 200px;
				height: 200px;
				background-color: pink;
				position: absolute; /*盒子居中对齐*/
				left: 50%; /*以父级宽度为准*/
				margin-left: -100px; /*需要计算*/
				top: 50%;
				transform: translate(-50%,-50%);
			}
		</style>
	</head>
	<body>
	<div></div>
</html>

2.缩放 scale

transform: scale(x,y)
x和y的值小于1为缩小倍数，大于1为放大倍数。

<html>
	<head>
		<style>
			div {
				width: 200px;
				height: 200px;
				background-color: pink;
			}
			div:hover {
				transform: scale(1.2,1.5);
			}
		</style>
	</head>
	<body>
	<div></div>
</html>

注意：

如果只写一个参数，宽高都缩放！

谁做动画，谁加过渡！

<html>
	<head>
		<style>
			div {
				width: 100px;
				height: 50px;
				background-color: pink;
				overflow: hidden;
			}
			div img {
				transition: all 0.3s;
			}
			div:hover img {
				transform: scale(1.2,1.5);
			}
		</style>
	</head>
	<body>
	<div>
		<img src="images/search.png" alt="">
	</div>
</html>

3. 旋转 rotate

transform: rotate(*deg)
正值是顺时针，负值是逆时针；比如90deg是顺时针旋转90度

<html>
	<head>
		<style>
			div {
				width: 100px;
				height: 50px;
				background-color: pink;
				overflow: hidden;
			}
			div img {
				transition: all 0.3s;
			}
			div:hover img {
				transform: rotate(90deg);
			}
		</style>
	</head>
	<body>
	<div>
		<img src="images/search.png" alt="">
	</div>
</html>

旋转中心点的设置：

	<html>
		<head>
			<style>
				div img {
					padding: 200px;
					transition: all 0.3s;
					transform-origin: bottom top;
				}
				div:hover img {
					transform: rotate(90deg);
				}
			</style>
		</head>
		<body>
		<div>
			<img src="images/search.png" alt="">
		</div>
	</html>

4. 倾斜 skew

transform: skew(x,y);

<html>
	<head>
		<style>
			div {
				font-size: 50px;
				font-weight: 700;
				transition: all 0.2s;
			}
			div:hover {
				transform: skew(20deg,0);
			}
		</style>
	</head>
	<body>
	<div>
		123
	</div>
</html>

三、3D变形

3D多了z轴，遵循左手法则。
在这里插入图片描述

1. rotateX（）rotateY（） rotateZ（）

<html>
	<head>
		<style>
			div img {
				transition: all 0.2s;
			}
			div:hover img {
				transform: rotateX(180deg);
			}
		</style>
	</head>
	<body>
	<div>
		<img src="images/course.png" alt="">
	</div>
</html>

2. 体会透视 perspective

透视原理：近大远小。
浏览器透视：把近大远小的所有图像，透视在屏幕上。
perspective：视距，表示视点距离屏幕的长短。视点，用于模拟透视效果时人眼的位置

注：并非任何情况下需要透视效果，根据开发需要进行设置。
perspective一般作为一个属性，设置给父元素，作用于所有3D转换的子元素

<html>
	<head>
		<style>
			div {
				perspective: 1000px;
			}
			div img {
				transition: all 0.2s;
			}
			div:hover img {
				transform: rotateX(180deg);
			}
		</style>
	</head>
	<body>
	<div>
		<img src="images/course.png" alt="">
	</div>
</html>

3. translateX（） translateY（） translateZ（）

Z轴是物体到屏幕的距离，透视是一种展示形式。

<html>
	<head>
		<style>
			div {
				margin: 200px;
				perspective: 1000px;
			}
			div img {
				transition: all 0.2s;
			}
			div:hover img {
				transform: translateZ(100px);
			}
		</style>
	</head>
	<body>
	<div>
		<img src="images/course.png" alt="">
	</div>
</html>

transform: translate3d(x,y,z);
z轴只能是px单位。

<html>
	<head>
		<style>
			div {
				margin: 200px;
				perspective: 1000px;
			}
			div img {
				transition: all 0.2s;
			}
			div:hover img {
				transform: translate3d(100px,100px,100px);
			}
		</style>
	</head>
	<body>
	<div>
		<img src="images/course.png" alt="">
	</div>
</html>

4. 开门大吉例子

<html>
	<head>
		<style>
			div {
				width: 200px;
				height: 180px;
				margin: 200px;
				background: url(images/course.png);
				perspective: 1000px;
				position: relative;
			}
			span {
				display: block;
				width: 100px;
				height: 180px;
				background-color: pink;
				border: 1px solid black;
				transition: all 0.2s;
			}
			span.door-l {
				position: absolute;
				top: 0;
				left: 0;
				transform-origin: left;
			}
			span.door-r {
				position: absolute;
				top: 0;
				right: 0;
				transform-origin: right;
			}
			div:hover .door-l   {
				transform: rotateY(-130deg);
			}
			div:hover .door-r  {
				transform: rotateY(130deg);
			}
		</style>
	</head>
	<body>
	<div>
		<span class="door-l"></span>
		<span class="door-r"></span>
	</div>
</html>

在这里插入图片描述

5. backface-visibility

用于设置图片不正向对着屏幕时是否可见。
可以用来写翻转图片，先translateY（180deg），当backface-visibility：hidden可以实现翻转时显示背面图片。

四、动画

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

动画名称是自定义的

<html>
	<head>
		<style>
			div {
				width: 200px;
				height: 180px;
				margin: 200px;
				background: url(images/course.png);
				/*animation: name duration timing-function delay iteration-count direction fill-mode;*/
				animation: go 2s ease 0s 2 reverse;
			}
			@keyframes go { /*定义动画*/
				from{
					transform: translate(0);
				}
				to{
					transform: translate(600px);
				}
			}
		</style>
	</head>
	<body>
	<div>
	</div>
</html>

例子：无缝滚动

<html>
	<head>
		<style>
			* {
				margin: 0;
				padding: 0;
			}
			ul {
				list-style: none;
			}
			nav {
				width: 1200px;
				height: 20px;
			}
			nav li {
				float: left;
			}
			nav ul {
				width: 200%; /*两倍！！！*/
				animation: moving 2s linear infinite;
			}
			div {
				width: 200px;
				height: 20px;
			}
			@keyframes moving { /*定义动画*/
				from{
					transform: translate(0);
				}
				to{
					transform: translate(-1000px);
				}
			}
			nav:hover ul { /*鼠标经过nav，里面的ul不做动画*/
				animation-play-state: paused ;
			}
		</style>
	</head>
	<body>
	<nav>
		<ul>
			<li><div style="background-color: red;"></div></li>
			<li><div style="background-color: orange;"></div></li>
			<li><div style="background-color: yellow;"></div></li>
			<li><div style="background-color: green;"></div></li>
			<li><div style="background-color: blue;"></div></li>
			<li><div style="background-color: purple;"></div></li>
			<li><div style="background-color: red;"></div></li>
			<li><div style="background-color: orange;"></div></li>
			<li><div style="background-color: yellow;"></div></li>
			<li><div style="background-color: green;"></div></li>
			<li><div style="background-color: blue;"></div></li>
			<li><div style="background-color: purple;"></div></li>
		</ul>
	</nav>
</html>