web前端基础 html5+css3（十二.2D转换，动画，3D转换）

彼岸~流觞

已于 2022-03-23 17:54:29 修改

阅读量1.1k

点赞数 1

分类专栏： html5+css3 文章标签： css3 html html5

于 2020-10-12 23:33:26 首次发布

本文链接：https://blog.csdn.net/weixin_41325924/article/details/108956932

版权

html5+css3 专栏收录该内容

13 篇文章 0 订阅

订阅专栏

一、2D转换

1.2D转换之移动translate

（1）transform:translate(x,y);

transform:translate(100px,100px);

（2）transform:translateX(n);

transform:translateX(500px);

（3）transform:translateY(n);

transform:translateY(500px);

	div{
		width: 200px;
		height: 200px;
		background: skyblue;
		/*x就是x轴上移动位置y 就是y轴上移动位置 中间用逗号分隔*/
		/*transform:translate(x,y);*/
		/*transform:translate(500px,500px);*/
		/*1.我们只移动x坐标*/
		/*transform:translate(100px,0)*/
		/*transform:translateX(500px);*/
		/*2.我们只移动y坐标*/
		/*transform:translate(0,100px)*/
		/*transform:translateY(500px);*/
	}
	div:first-child{
		transform:translate(30px,30px);
	}
	div:last-child{
		background: #c00;
	}
        <div></div>
        <div></div>

2.让盒子实现水平和垂直居中

	div{
		/*position: relative;*/
		/*width: 200px;
		height:200px;
		background: skyblue;
		/*1.我们transform里面的参数是可以用%*/
		/*2.如果里面的参数是%移动的距离是盒子自身的宽度或者高度来对比的*/
		/*这里的50%就是50px因为盒子的宽度是100px*/
		/*transform:translateX(50%);*/
	}
        p{
		position: absolute;
		top: 50%;
		left: 50%;
		width: 200px;
		height: 200px;
		background: #c00;
		/*margin-top: -100px;
		margin-left: -100px;*/
		/*translate(-50%,-50%) 盒子往上走自己高度的一半*/
		transform:translate(-50%,-50%);
	}
	span{
		/*transform对于行内元素是无效的*/
		width: 200px;
		height: 200px;
		background: orange;
		transform:translate(300px,300px);
	}
    <div><p></p><span></span></div>

3.2D转换之旋转rotate

transform:rotate(度数)

单位:deg

角度为正时，顺时针为负时，逆时针

默认旋转的中心点是元素的中心点

transform:rotate(30deg);

img{
		width: 150px;
		margin-top: 50px;
		/*顺时针旋转45度*/
		/*transform:rotate(30deg);*/
		border-radius: 50%;
		border:5px solid pink;
		/*过渡写在本身上，谁做动画给谁加*/
		transition:all 0.8s;
	}
	img:hover{transform:rotate(360deg);/*transform:translate(50px,200px);*/border:2px solid #c00;}
<img src="images/2.jpg"/>

4.2D转换之旋转rotate案例：三角形

div{position:relative;width: 249px;height: 35px;border: 1px solid #000;left: 50%;top:50%;margin-left: -100px;margin-top:200px;}
div::after{content:'';position: absolute;top:8px;right:15px;width: 10px;height: 10px;border-right: 1px solid #000;border-bottom:1px solid #000;transform:rotate(45deg);transition:all 0.2s;}
/*鼠标经过div里面的三角旋转*/
div:hover::after{transform:rotate(225deg);top:15px;}
<div></div>

5.转换中心点transform-origin

transform-origin:x y;

注意后面的参数x和y用空格隔开

xy默认转换的中心点是元素的中心点(50%,50%)

还可以给x y设置像素或者方位名词（top bottom left right center）

div{
	width: 200px;
	height: 200px;
	background: yellow;
	margin:100px auto;
	transition:all .5s;
	/*1.可以跟方位名词*/
	/*transform-origin:left bottom;*/
	/*2.默认的是50% 50% 等价于 center center*/
	/*3.可以是px 像素*/
	transform-origin:100px 200px;
}
div:hover{transform:rotate(50deg);}
<div></div>

6.旋转中心点案例

div{
	overflow:hidden;
	width:200px;
	height:200px;
	border: 1px solid #c00; 
	margin:100px auto;
}
div::before{
	content: '离歌笑';
	width: 100%;
	height: 100%;
	background: pink;
	display: inline-block;
	transform:rotate(180deg);
	transform-origin:left bottom;
	transition:all .5s;
	text-align:center;
	line-height: 200px;
}
div:hover::before{
	transform:rotate(0deg);
}
<div></div>

7.2D转换之缩放scale

transform:scale(x,y)

（1）transform:scale(1,1)宽高都放大1倍，相当于没有放大

（2）transform:scale(2,2)宽高都放大2倍

（3）transform:scale(2)只写一个参数，第二个参数则和第一个参数一样，相当于 scale(2,2)

（4）transform:scale(0.5,0.5)缩小

优势：可以设置转换中心点缩放，默认以中心点缩放，而且不影响其他盒子

div{
	overflow:hidden;
	width:200px;
	height:200px;
	background: pink; 
	margin:100px auto;
	transition:all .6s;
	transform-origin:left top;
}
div:hover{
	/*1.里面写的数字不跟单位，就是倍数的意思 1就是1倍 2就是2倍*/
	/*transform:scale(x,y);
	transform:scale(2,2);
	/*2.修改了宽度为原来的2倍 高度不变*/
	/*transform:scale(2,1);
	/*3.等比例缩放 同时修改宽度和高度，我们有简单的写法，以下是宽度修改了2倍，高度默认和第一个参数一样*/
	/*transform:scale(2);
	/*4.我们可以进行缩放，小于1就是缩放*/
	/*transform:scale(0.5,0.5);
	transform:scale(0.5);
	/*5.scale的优势之处：不会影响其他盒子，而且可以设置缩放的中心点*/
	/*width: 300px;
	height: 300px;*/
	transform:scale(2);
}
<div></div>
464

8.图片放大案例

div{overflow: hidden;}
div img{transition:all .7s;}
div img:hover{transform:scale(1.1);}
<body>
	<div>
		<a href="#">
			<img src="images/2.jpg"/>
		</a>
	</div>
	<div>
		<a href="#">
			<img src="images/2.jpg"/>
		</a>
	</div>
	<div>
		<a href="#">
			<img src="images/2.jpg"/>
		</a>
	</div>
</body>

9.分页按钮案例

div{width: 30px;height: 30px;line-height:30px;text-align: center; border: 1px solid skyblue;border-radius: 15px;float: left;margin: 10px;transition:all .3s;}
div:hover{transform:scale(1.2);}
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
<div>5</div>

10.2D转换综合写法

transform:translate() rotate() scale()

同时有位移和其他属性，记得要将位移放到最前

div{width: 200px;height: 200px;background:pink;transition:all .6s;}
/*div:hover{transform:rotate(180deg) translate(150px,50px);}*/
/*我们同时有位移和其他属性，我们需要把位移放在最前面*/
div:hover{transform:translate(150px, 50px) rotate(180deg);}
<div></div>

11.2D转换总结

位移：translate(x,y) translateX(x) translateY(y)

旋转：rotate(度数) 旋转元素单位是deg

缩放：sacle(x,y) 不跟单位数字，可以是小数

设置转换中心点：transform-origin:x y 参数可以是百分比，像素或者是方位名词

有位移和其他属性，我们需要把位移放在最前面

二、css3动画

1.基本使用

@keyframes move{
	/*开始状态*/
	0%{transform:translateX(0px);}
	/*结束状态*/
	100%{transform:translate(1000px);}
}
div{
	width: 200px;
	height: 200px;
	background: #c00;
	/*2.调用动画*/
	/*动画名称*/
	animation-name:move;
	/*持续时间*/
	animation-duration:5s;
}
<div></div>

2.动画序列

/*from和to等价于0%和100%*/
@keyframes move{
	from{
		transform:translate(0px,0px);
	}
	to{
		transform:translate(1000px,0px);
	}
}
div{
	width: 300px;
	height: 300px;
	background: pink;
	animation-name:move;
	animation-duration:.2s;
}
<div></div>

@keyframes move{
	0%{
		transform:translate(0,0);
	}
	25%{
		transform:translate(1000px,0);
	}
	75%{
		transform:translate(1000px,500px);
	}
	100%{
		transform:translate(0px,500px);
	}
}
div{
	width: 50px;
	height: 50px;
	background: skyblue;
	animation-name:move;
	animation-duration:5s;
	animation-direction:alternate;
}
<div></div>

3.动画的常用属性

（1）动画名称：animation-name

（2）持续时间：animation-duration

（3）运动曲线：animation-timing-function（默认是ease）

（4）何时开始：animation-delay

（5）重复次数：animation-iteration-count（默认是1 infinite是无限）

（6）是否反方向播放：animation-direction（默认的是normal 如果想要反方向就写alternate）

（7）动画结束后的状态：animation-fill-mode（默认是backwards 回到起始状态我们可以让他停留在结束状态 forwards）

（8）鼠标经过div，让这个div停止动画，鼠标离开就继续动画：animation-play-state（默认是running paused停止动画）

@keyframes move{
	0%{
		transform:translate(0,0);
	}
	20%{
		transform:translate(1000px,0);
	}
	40%{
		transform:translate(1000px,500px);
	}
	80%{
		transform:translate(0px,500px);
	}
	100%{
		transform:translate(0px,0px);
	}
}
div{
	width: 100px;
	height: 100px;
	background: pink;
	/*动画名称*/
	animation-name:move;
	/*持续时间*/
	animation-duration:2s;
	/*运动曲线*/
	animation-timing-function:ease;
	/*何时开始*/
	animation-delay:1s;
	/*重复次数 iteration 重复的 count 次数 infinite 无限*/
	animation-iteration-count:infinite;
	/*是否反方向播放 默认的是normal 如果想要反方向 就写alternate*/
	animation-direction:alternate;
}
div:hover{
	/*鼠标经过div，让这个div停止动画，鼠标离开就继续动画*/
	animation-play-state:paused;
}

4.动画的简写属性

animation:动画名称持续时间运动曲线何时开始播放次数是否反方向动画起始或者结束的状态

animation:name duration timing-function delay iteration-count direction fill-mode

animation:myfirst 5s linear 2s infinite alternate

/*动画名称 持续时间 运动曲线 何时开始 重复次数 是否反方向 动画起始或者结束的状态*/
/*animation:name duration timing-function delay iteration-count direction fill-mode;*/
animation:move 2s linear 0s infinite alternate forwards;
/*前面两个属性 name duration 一定要写*/
animation:move 2s linear alternate forwards;

简写属性不包含 animation-play-state

想要动画走回来，而不是直接跳回来：animation-direction:alternate（反方向播放（反复横跳））

盒子动画结束后，停在结束位置：animation-fill-mode:forwards 默认是backwards回到起始状态

5.大数据热点图

body{background-color:#333;}
.map{position: relative;width: 747px;height: 616px;background: url(images/map.png) no-repeat;margin: 0 auto;}
.city{position: absolute;width: 227px;height: 193px;color:#fff;left: 56%;top: 22%;}
.tb{top: 66%;left: 72%;}
.gz{top: 73%;left: 57%;}
.dotted{width: 8px;height: 8px;background: #09f;border-radius: 50%;position: relative;left: 48.5%;top: 48%;}
.city div[class^="pulse"]
{
	/*保证我们小波纹在父盒子里面处置居中 放大之后就会中心向四周发散*/
	position: absolute;
	top:50%;
	left: 50%;
	transform:translate(-50%,-50%);
	width: 8px;height: 8px;
	box-shadow:0 0 12px #009dfd;
	border-radius:50%;
	animation:pulse 1.2s linear infinite;
}
.city div.pulse2 {
    animation-delay: 0.4s;
}

.city div.pulse3 {
    animation-delay: 0.8s;
}
@keyframes pulse{
	0%{}
	70%{
		width: 40px;
		height: 40px;
		opacity:1;
	}
	100%{
		width: 70px;
		height: 70px;
		opacity:0;
	}
}
</style>
</head>
<body>
	<div class="map">
		<div class="city">
			<div class="dotted"></div>
			<div class="pulse1"></div>
			<div class="pulse2"></div>
			<div class="pulse3"></div>
		</div>
		<div class="city tb">
			<div class="dotted"></div>
			<div class="pulse1"></div>
			<div class="pulse2"></div>
			<div class="pulse3"></div>
		</div>
		<div class="city gz">
			<div class="dotted"></div>
			<div class="pulse1"></div>
			<div class="pulse2"></div>
			<div class="pulse3"></div>
		</div>
	</div>
</body>

6.速度曲线细节

animation-timing-function:规定动画的速度曲线，默认是ease

（1）linear：动画从头到尾的速度是相同的。匀速

（2）ease：默认。动画从低速开始，然后加快，在结束前变慢

（3）ease-in：动画以低速开始

（4）ease-out：动画以低速结束

（5）ease-in-out：动画以低速开始和结束

（6）steps()：指定了时间函数中的间隔数量（步长）

下面是关于steps()步长的小练习

div{
	overflow:hidden;width: 0;height:30px;background: #c00;font-size: 20px;
	/*强制一行显示*/
	white-space:nowrap;
	/*steps就是分几步完成我们的动画 有了steps就不要写ease或者linear了*/
	animation:w 4s steps(10) alternate forwards;
}
@keyframes w{
	0%{width: 0;}
	100%{width: 200px;}
}
</style>
</head>
<body>
<div>天生一对地一双嗷嗷嗷</div>
</body>

7.奔跑的熊案例

body{background: #eee;}
.bg{
	background: url(images/bg1.png) repeat-x;width: 100%;height: 300px;position: absolute;bottom: 0;
	animation:motun 2s steps(10)  infinite ;
}
.bear{
	position:absolute;
	bottom: 0;
	width: 200px;height: 100px;
	background: url(images/bear.png) no-repeat;
	animation:bear 1s steps(8) infinite,move 3s  forwards;
}
@keyframes bear{
	0%{background-positoon:0 0;}
	100%{background-position:-1600px 0;}
}
@keyframes move{
	0%{left:0;}
	100%{left:50%;}
}
@keyframes motun{
	0%{background-positoon:0 0;}
	100%{background-position:-1600px 0;}

}
</style>
</head>
<body>
<div class="bg"></div>
<div class="bear"></div>

三、3D转换

1.3D移动translate3d+透视perspective

body{
	position:absolute;
	/*透视写到被观察元素的父盒子上面*/
	perspective:200px;
}
div{
	width: 200px;
	height: 200px;
	background: #c00;
	/*transform:translateX(100px);
	transform:translateY(100px);
	transform:translateX(100px) translateY(100px) translateZ(100px);
	/*1.transformZ沿着Z轴移动*/
	/*2.transform后面的单位我们一般跟px*/
	/*3.transformZ(100px)向外移动100px（向我们的眼睛来移动的）*/
	/*4.3D移动有简写的方法*/
	/*transform:translate3d(x,y,x);
	transform:translate3d(100px,100px,100px);
	/*5.xyz是不能省略的，如果没有就写0*/
	transform:translate3d(100px,100px,100px);
}
<div></div>

2.translateZ

body{
	perspective:500px;
}
div{
	width: 200px;height: 200px;
	background: pink;
	margin:100px auto;
	transform:translateZ(200px);
}

3.3D旋转rotateX

body{perspective:300px;}
img{display: block;margin: 100px auto;transition:all 1s;}
img:hover{transform:rotateX(-45deg);}
</style>
</head>
<body>
<div>
	<img src="images/pig.jpg"></img>
</div>
</body>

4.3D旋转rotateY

body{perspective:300px;}
img{display: block;margin: 100px auto;transition:all 1s;}
img:hover{transform:rotateY(45deg);}
</style>
</head>
<body>
<div>
	<img src="images/pig.jpg"></img>
</div>

5.3D旋转rotateZ

body{perspective:300px;}
img{display: block;margin: 100px auto;transition:all 1s;}
img:hover{transform:rotateZ(45deg);}
</style>
</head>
<body>
<div>
	<img src="images/pig.jpg"></img>
</div>

6.3D旋转rotate3d

transformrotate3d(x,y,x,deg)

body{perspective:300px;}
img{display: block;margin: 100px auto;transition:all 1s;}
img:hover{
	transform:rotateZ(45deg);
	/*transform:rotate3d(x,y,x,deg);*/
	/*transform:rotate3d(1,0,0,45deg);
	transform:rotate3d(0,1,0,-45deg);*/
	tansform:rotate3d(1,1,0,45deg);
}
</style>
</head>
<body>
<div>
	<img src="images/pig.jpg"></img>
</div>
</body>

7.3D呈现transform-style

body{
	perspective:300px;
}
.box{
	position: relative;
	width: 200px;
	height: 200px;
	margin:0 auto;
	transition:all 2s;
	/*让子元素保持3d立体空间环境*/
	transform-style:preserve-3d;
}
.box div{
	position:absolute;
	top:0;
	left:0;
	width: 100%;
	height: 100%;
	background: pink;
}
.box div:last-child{
	background: #c00;
	transform:rotateX(60deg);
}
</style>
</head>
<body>
<div class="box">
	<div></div>
	<div></div>
</div>
</body>

8.两面翻转的盒子

body{
	prespective:350px;
}
.box{
	position:relative;
	width: 300px;
	height: 300px;
	margin:100px auto;
	transition:all .6s;
	/*让背面的盒子保留立体空间*/
	transform-style:preserve-3d;
}
.one,.two{
	position:absolute;
	top:0;
	left: 0;
	width: 100%;
	height: 100%;
	border-radius: 50%;
	background: #c00;
	font-size: 30px;
	color: #fff;
	text-align:center;
	line-height: 300px;
}
.one{
	background: skyblue;
	z-index: 1;
}
.two{
	transform:rotateY(180deg);
}
.box:hover{
	transform:rotateY(180deg);
}
</style>
</head>
<body>
<div class="box">
	<div class="one">刘亦菲</div>
	<div class="two">胡歌</div>
</div>
</body>

9.3D导航栏案例

ul {margin:100px;}
ul li{width: 120px;height: 40px;line-height:40px;list-style: none;preserve:200px;float: left;margin:0 10px;}
.box{position:relative;width:100%;height: 100%;transform-style:preserve-3d;transition:all .6s;}
.one,.two{position:absolute;left:0;top:0;width:100%;height: 100%;text-align:center;color:#fff;}
.one{background: purple;z-index: 1;transform:translateZ(17.5px);}
.two{background: pink;
	/*我们如果有移动或者其他样式,必须先写我们的移动*/
	transform:translateY(17.5px) rotateX(-80deg);}
.box:hover{transform:rotateX(90deg);}

</style>
</head>
<body>
<ul>
	<li>
		<div class="box">
			<div class="one">胡歌</div>
			<div class="two">刘亦菲</div>
		</div>
	</li>
	<li>
		<div class="box">
			<div class="one">胡歌</div>
			<div class="two">刘亦菲</div>
		</div>
	</li>
	<li>
		<div class="box">
			<div class="one">胡歌</div>
			<div class="two">刘亦菲</div>
		</div>
	</li>
	<li>
		<div class="box">
			<div class="one">胡歌</div>
			<div class="two">刘亦菲</div>
		</div>
	</li>
	<li>
		<div class="box">
			<div class="one">胡歌</div>
			<div class="two">刘亦菲</div>
		</div>
	</li>
</ul>
</body>

10.旋转木马案例

body{perspective:1000px;}
section{position: relative;width: 300px;height: 200px;margin:150px auto;transform-style:preserve-3d;animation:rotate 10s linear infinite;background: url(images/pig.jpg) no-repeat;}
section div{position:absolute;width:100%;height: 100%;left: 0;top: 0;background: url(images/dog.jpg) no-repeat;}
section div:nth-child(1){ transform:translateZ(300px);}
section div:nth-child(2){transform:rotateY(60deg) translateZ(300px);}
section div:nth-child(3){transform:rotateY(120deg) translateZ(300px);}
section div:nth-child(4){transform:rotateY(180deg) translateZ(300px);}
section div:nth-child(5){transform:rotateY(240deg) translateZ(300px);}
section div:nth-child(6){transform:rotateY(300deg) translateZ(300px);}
/*添加动画效果*/
@keyframes rotate{
	0%{transform:rotateY(0);}
	100%{transform:rotateY(360deg);}
}
</style>
</head>
<body>
<section>
	<div></div>
	<div></div>
	<div></div>
	<div></div>
	<div></div>
	<div></div>
</section>

11.浏览器私有前缀

-moz-：firefox浏览器私有属性：-moz-transform: scale(1.3);

-ms-：代表ie浏览器私有属性：-ms-transform: scale(1.3);

-webkit-：代表safari，chrome私有属性：-webkit-box-sizing: border-box;

-o-：代表Opera私有属性：-o-transform: scale(1.3);

四、自制新闻轮播小案例（keyframes，animation）

*{margin: 0;padding: 0;}
.hg{height: 40px;overflow:hidden;
	margin:20px 800px;}
ul{
	position: relative;
	/*perspective:200px;
	transform-style:preserve-3d;*/
	animation:lyf 3s ease infinite;
}
ul li{
	width: 200px;
	overflow:hidden;
	line-height: 40px;
	background: pink;
	color: #fff;
	text-align: center;
	list-style:none;
}
@keyframes lyf{
	0%{top:-2px;}
	50%{top:-40px;}
	100%{top:-80px;};
}
</style>
</head>
<body>
<div class="hg">
	<ul>
		<li>刘亦菲</li>
		<li>Love</li>
		<li>胡歌</li>
	</ul>
</div>

彼岸~流觞

关注

1
点赞
踩
3

收藏

觉得还不错? 一键收藏
0
评论
web前端基础 html5+css3（十二.2D转换，动画，3D转换）

1.2D转换之移动translate（1）transform:translate(x,y);transform:translate(100px,100px);（2）transform:translateX(n);transform:translateX(500px);（3）transform:translateY(n);transform:translateY(500px); div{ width: 200px; height: 200px; backgrou
复制链接

扫一扫