css3 2D,动画，3D学习

最新推荐文章于 2023-06-14 20:54:09 发布
最新推荐文章于 2023-06-14 20:54:09 发布
阅读量597 收藏 1
点赞数
分类专栏： 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_49548374/article/details/108015416
版权

2D变形：transform

移动translate

1、 transform:translate(x,y):沿X轴Y轴方向移动元素
transform:translateX(x):沿X轴方向移动元素
transform:translateY(y):沿Y轴方向移动元素
2、translate优点：不会影响其他元素的位置
3、translate中的百分比单位是相对于自身元素的translate(50%,50%),如果不写百分比则写像素
4、对行内标签没有效果

旋转rotate

1、格式：transform:rotate(度数)
transform:rotateX(度数)：沿X轴方向（向右）旋转多少度(变成3D的了，但是在2D平面看不出3D效果，只能看到元素比原来矮)
transform:rotateY(度数)：沿Y轴方向（向下）旋转多少度(变成3D的了，但是在2D平面看不出3D效果，只能看到元素比原来窄)
2、 rotate里面跟度数，单位为deg,例如rotate(45deg)
3、 角度为正时，顺时针，负时，逆时针
4、默认旋转的中心点为元素的中心点
5、旋转不影响其他位置

中心点

在2D变形中，可以根据标签设置一个点，根据这个点进行变形，旋转，缩放，倾斜支持中心点属性
1、设置中心点要写在要设置的标签里，别写在那个标签的hover里，不然效果是先以原来的中心点变形，再改变为后来设置的中心点
2、参数x和y用空格隔开
3、设置百分比：transform-origin: (50% 50%)：xy默认的中心点是元素的中心点(50% 50%)
4、给xy设置像素或者方位名词（top bottom left right center）
例子：transform-origin: left buttom;(如果只写一个方位名词，则以这个方位的边的中点为中心点)
5、给xy设置像素：
例子： transform-origin: 50px 50px;

缩放(scale:范围)

格式：transform: scale(x,y)：整体缩放
transform: scaleX(x)：沿X轴缩放
transform: scaleY(y)：沿Y轴缩放
1、xy是放大的倍数，默认都为1，即没有放大
2、transform: scale(2,2);放大两倍
3、transform: scale(0.5,0.5);缩小一半
4、只写一个参数，则第二个参数默认与第一个一样，即(2)等价于(2,2)，所以只想设置一条轴时，另一条轴要设置为1
5、scale缩放的最大优势：可以设置中心点缩放，默认以中心点缩放，并且不影响其他位置
注意：只能写倍数，像素无用

倾斜skew

transform:skew(x,y);(如果只写一个值，默认为x)
transform:skewX(x)：沿x轴方向倾斜
transform:skewY(y)：沿Y轴方向倾斜
1、可以设置中心点，围绕中心点倾斜
2、与缩放相似
3、transform: skewy(30deg,20deg);：横坐标倾斜30度，纵坐标倾斜20度

2D综合写法

1、顺序：transform:translate() rotate() scale()…等
2、顺序会改变转换效果(先旋转会改变坐标轴方向)
3、当我们同时设置位移和其他属性时，记得将位移放到最前面

总结

1、2D变形都不会影响其他元素的位置
2、对行内标签都没有效果
3、如果想看的整个过程，要用过渡(transition)
4、旋转，缩放，倾斜支持中心点属性

2D练习

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style type="text/css">
			.div1{
				background-image: url(img/02.jpg);
				background-size: cover;
				background-repeat: no-repeat;
				background-position: 0 -20px;
				width: 500px;
				height: 325px;
				margin: 100px auto;	
				transition: all .5s ease;	
				border: 1px dashed red;	
				position: relative;
					
			}
						
			.div1:hover{
				background-position: 0 0;
			}
			.div2{				
				width: 100%;
				height: 325px;
				position: absolute;
				left: 0px;
				top: 0px;
				z-index: 999;
			}
			.div1:hover .div2{
				background-color: rgba(0,0,0,0.1);
			}
			.h{
				width: 400px;
				height: 265px;
			}
			.h1{				
				position: absolute;
				left: 70px;
				top: 30px;
			}
			.div2:hover .h1{
				border-left: 1px solid white;
			}
			.h2{
				position: absolute;
				left: 50px;
				top: 45px;
			}
			.div2:hover .h2{
				border-left: 1px solid white;
			}
			.h3{
				position: absolute;
				right: 70px;
				top: 30px;
			}
			.div2:hover .h3{
				border-left: 1px solid white;
			}
			.h4{
				position: absolute;
				left: 50px;
				bottom: 45px;
			}
			.div2:hover .h4{
				border-left: 1px solid white;
			}
		</style>
	</head>
	<body>
		<div class="div1">
			<div class="div2"></div>
			<div class="h h1"></div>
			<div class="h h2"></div>
			<div class="h h3"></div>
			<div class="h h4"></div>
		</div>
	</body>
</html>

结果：
在这里插入图片描述

动画animation

动画的基本使用

1、定义动画

@keyframes move{
				0%{
					transform: translateX(0%);
				}
				100%{
					transform: translateX(150%);
				}

注意：
（1）%0是动画的开始，100%是动画的结束，这样的规则就是动画序列
（2）在@keyframes中规定某项css样式，就能创建由当前样式逐渐改为新样式的动画效果
（3）动画是使元素从一种样式逐渐变化为另一种样式的效果，你可以改变任意多的样式任意多的次数
（4）用百分比来规定变化发生的时间，或用关键字“from”和“to”来代替0%和100%
2、调用动画

#div1{
				background-color: skyblue;
				height: 200px;
				width: 200px;
				/*调用动画*/
				animation-name: move;
				/*持续时间*/
				animation-duration: 3s;				
			}

动画常用属性

属性描述
@keyframes规定动画（关键字）
animation所有动画的简写属性，除了animation-play-state
animation-name规定@keyframes动画的名称（必须的）
animation-duration规定动画完成一个周期所花费的秒或毫秒，默认是0（必须的）
animation-timing-function规定动画的速度曲线，默认是“ease”
animation-delay规定动画何时开始，默认是0
animation-iteration-count规定动画播放的次数，默认是1，可以设置infinite(无穷大)
animation-direction规定动画在下一周期是否逆向播放（走回来，不是跳回来），默认是”normal”，可以设置为”alternate”逆播放
animation-play-state规定动画是否正在运行或者暂停，默认是”running”，还有”paused”
animation-fill-mode规定动画结束后状态，停止在终点位置”forwards”，回到起始位置”backwords”（默认值）

动画简写属性

animation:动画名称 持续时间 运动曲线 何时开始 播放次数 是否反方向 动画起始或者结束的状态
注意：
（1）简写属性里不包含animation-play-state
（2）暂停动画：animation-play-state:paused;经常和鼠标经过等其他配合使用
（3）animation可以添加多个动画，每个动画之间用逗号分隔

animation-timing-function的值

值描述
linear匀速
ease低速开始，然后加快，结束前变慢（慢快慢）
ease-in低速开始（慢快快）
ease-out低速结束（快快慢）
ease-in-out低速开始，低速结束（慢快慢）
steps()指定了时间函数中的间隔数量（步长）

动画练习

1、摩天轮

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style type="text/css">
			*{
				margin: 0px;
				padding: 0px;
			}			
			.a1{
				background-image: url(img/motianlun/2.jpg);
				background-size: 100% 100%;
				background-repeat: no-repeat;
				width: 100%;
				height: 720px;				
			}
			.a2{
				margin: 0 auto;
				transform: translateY(20%);
				width: 400px;
				height: 500px;
				position: relative;
				
			}
			.img1{
				position: absolute;
				left: 95px;
				bottom: 0px;
				width: 200px;
				height: 300px;
			}
			.img2{
				position: absolute;
				left: 67px;
				bottom: 0px;
				width: 250px;
				height: 300px;
			}
			.lunzi{
				width: 400px;
				height: 400px;
				margin-left:-5px;
				margin-top: 10px;
				position: relative;
				animation-name: lunzi;
				animation-duration: 10s;
				animation-timing-function: linear;
				animation-iteration-count: infinite;  
			}
			@keyframes lunzi{
				from{
					transform: rotate(0deg);
				}
				to{
					transform: rotate(360deg);
				}
			}
			.img3{
				position: absolute;
				left: 0px;
				bottom: 0px;
				width: 100%;
				height: 100%;
			}
			.img{
				position: absolute;
				width: 80px;
				height: 100px;
				animation-name: tupian;
				animation-duration: 10s;
				animation-timing-function: linear;
				animation-iteration-count: infinite; 
				/*transform-origin: 50% 0%;*/
			}
			@keyframes tupian{
				from{
					transform: rotate(360deg);
				}
				to{
					transform: rotate(0deg);
				}
			}
			.img4{				
				left: 40px;
				bottom: 0px;				
			}
			.img5{				
				left: -20px;
				bottom: 120px;				
			}
			.img6{				
				left: 40px;
				bottom: 250px;				
			}
			.img7{				
				left: 165px;
				top: -5px;				
			}
			.img8{				
				right: 40px;
				top: 35px;				
			}
			.img9{				
				right: -20px;
				top: 160px;				
			}
			.img10{				
				right: 30px;
				top: 265px;				
			}
			.img11{				
				right: 155px;
				bottom: -30px;				
			}
		</style>
	</head>
	<body>
		<div class="a1">
			<div class="a2">
				<img src="img/motianlun/bracketsmall.png" class="img1"/>
				<img src="img/motianlun/bracket.png" class="img2"/>
				<div class="lunzi">
					<img src="img/motianlun/fsw.png" class="img3"/>
					<img src="img/motianlun/dog.png" class="img4 img"/>
					<img src="img/motianlun/girl.png" class="img5 img"/>
					<img src="img/motianlun/girls.png" class="img6 img"/>
					<img src="img/motianlun/hairboy.png" class="img7 img"/>
					<img src="img/motianlun/mimi.png" class="img8 img"/>
					<img src="img/motianlun/mudog.png" class="img9 img"/>
					<img src="img/motianlun/shamegirl.png" class="img10 img"/>
					<img src="img/motianlun/boy.png" class="img11 img"/>
				</div>
			</div>
		</div>
	</body>
</html>

结果：
在这里插入图片描述
2、小熊炮车

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style type="text/css">
			*{
				margin: 0;
				padding: 0;
			}
			.bg{
				background-color: #0093fe;
				width: 100%;
				height: 720px;
			}
			/*天空*/
			.head{
				width: 100%;
				height: 300px;
				overflow: hidden;
				position: relative;
			}
			.square{
				width: 300px;
				height: 300px;
				/*背景渐变*/
				background:linear-gradient(to left bottom, rgba(255, 255, 255, 0.7), rgba(255, 255, 255, 0.1));
				transform: rotate(70deg);
				position: absolute;
				left: 200px;
				top: 150px;
			}
			.square2{
				width: 200px;
				height: 200px;
				/*背景渐变*/
				background:linear-gradient(to left bottom, rgba(255, 255, 255, 0.7), rgba(255, 255, 255, 0.1));
				/*旋转45度*/
				transform: rotate(40deg);
				position: absolute;
				right: 50px;
				top: 0px;
			}
			.circular{
				width: 200px;
				height: 200px;
				border-radius: 50%;
				background:linear-gradient(to left bottom, rgba(255, 255, 255, 0.7), rgba(255, 255, 255, 0.1));
				position: absolute;
				right: 530px;
				top: 50px;
			}
			.cir{
				width: 30px;
				height: 30px;
				border-radius: 50%;
				background:linear-gradient(to left bottom, rgba(255, 255, 255, 0.7), rgba(255, 255, 255, 0.1));
				position: absolute;
			}
			.cir1{
				left: 50px;
				top: 150px;
			}
			.cir2{
				left: 150px;
				top: 100px;
			}
			.cir3{
				left: 300px;
				top: 50px;
			}
			.cir4{
				left: 500px;
				top: 80px;
			}
			.cir5{
				left: 600px;
				top: 180px;
			}
			.cir6{
				left: 800px;
				top: 30px;
			}
			.cir7{
				left: 1000px;
				top: 50px;
			}
			.cir8{
				left: 1200px;
				top: 150px;
			}
			.cir9{
				right: 50px;
				top: 180px;
			}
			/*马路*/
			.walk{
				width: 100%;
				height: 200px;
				background-color: black;
				position: relative;
				/*防止绝对定位right: -200px;出现横向滚动条效果*/
				overflow: hidden;
			}
			.rectangle{
				width: 200px;
				height: 20px;
				background-color: white;
				position: absolute;
				right: -200px;
				top: 90px;					
			}
			.rect1{
				animation: road 9s linear infinite;
			}
			.rect2{
				animation: road 9s  3s linear infinite;
			}
			.rect3{
				animation: road 9s  6s linear infinite;
			}
			@keyframes road{
				from{
					left: 100%;
					transform: skew(30deg);	
				}
				to{
					left: -15%;
					transform: skew(-30deg);	
				}
			}
			.car{
				width: 300px;
				height: 200px;
				position: relative;
				left: 550px;
				top: -315px;
			}
			.wheel1{
				display: inline-block;
				width: 50px;
				height: 50px;
				border:3px solid orange;
				border-radius: 50%;
				background-color: black;
				position: relative;
				left: 20px;
				top: 140px;
				z-index: 99;
			}
			.wheel2{
				display: inline-block;
				width: 50px;
				height: 50px;
				border:3px solid orange;
				border-radius: 50%;
				background-color: black;
				position: relative;
				left: 100px;
				top: 140px;
				z-index: 99;
			}
			.wheel3{
				width: 30px;
				height: 30px;
				border-radius: 5px;
				background-color: white;
				position: absolute;
				left: 10px;
				top: 10px;
				animation: roll 2s linear infinite;
			}
			@keyframes roll{
				from{
					transform: rotate(0deg);
				}
				to{
					transform: rotate(360deg);
				}
			}
			.cheShen{
				display: inline-block;
				width: 200px;
				height: 100px;
				background-color: orange;
				position: absolute;
				left: 0px;
				top: 60px;
				z-index: 9;
			}
			.cheZuo{
				display: inline-block;
				width: 100px;
				height: 55px;
				background-color: orange;
				margin-left: -15px;
				transform: skewX(-10deg);
				position: absolute;
				left: 205px;
				top: 100px;
			}
			.jianduan{
				display: inline-block;
				width: 50px;
				height: 40px;
				background-color: orange;
				transform: skewY(10deg);
				position: absolute;
				right: 7px;
				top: 70px;
			}
			/*炮弹*/
			.yuan{
				width: 30px;
				height: 30px;
				border-radius: 50%;
				background-color: white;
				position: absolute;
				left: 0px;
				top: 15px;
			}
			.bullet{
				width: 200px;
				height: 30px;
				background-color: white;
				position: absolute;
				left: 15px;
				top: 15px;
				transform: rotate(-20deg);
				/*设置以左边的中点为中心逆时针旋转20度*/
				transform-origin: left;
				animation: run 1s linear infinite;
			}
			@keyframes run{
				from{
					width: 200px;
				}
				to{
					width: 120px;
				}
			}
			.gun{
				width: 30px;
				height: 30px;
				background-color: red;
				border-radius: 50%;
				position: absolute;
				left: 190px;
				top: -54px;
				animation: gun 1s linear infinite;
			}
			@keyframes gun{
				from{
					transform: translate(0px,0px);
				}
				to{
					transform: translate(600px,-220px);
				}
			}
			.zhicheng{
				width: 15px;
				height: 60px;
				background-color: white;
				position: absolute;
				left: 80px;
				top: 10px;
				transform-origin: bottom;
				animation: xuanzhuan 0.5s linear infinite alternate;
			}
			@keyframes xuanzhuan{
				from{
					transform: rotate(0deg);
				}
				to{
					transform: rotate(-45deg);
				}
			}
			.xiaoxiong{
				width: 100px;
				height: 100px;
				position: absolute;
				left: 184px;
				top: 17px;
			}
		</style>
	</head>
	<body>
		<div class="bg">
			<!--天空-->
			<div class="head">
				<div class="square"></div>
				<div class="square2"></div>
				<div class="circular"></div>
				<div class="cir cir1"></div>
				<div class="cir cir2"></div>
				<div class="cir cir3"></div>
				<div class="cir cir4"></div>
				<div class="cir cir5"></div>
				<div class="cir cir6"></div>
				<div class="cir cir7"></div>
				<div class="cir cir8"></div>
				<div class="cir cir9"></div>
			</div>
			<!--马路-->
			<div class="walk">
				<div class="rectangle rect1"></div>
				<div class="rectangle rect2"></div>
				<div class="rectangle rect3"></div>
			</div>
			<!--小车-->
			<div class="car">				
				<div class="wheel1">
					<div class="wheel3"></div>
				</div>
				<div class="wheel2">
					<div class="wheel3"></div>
				</div>
				<div class="cheShen"></div>
				<div class="cheZuo"></div>
				<div class="cheTou"></div>
				<div class="jianduan"></div>
				<!--炮弹-->
				<div class="yuan"></div>
				<div class="bullet"></div>
				<div class="gun"></div>
				<div class="zhicheng"></div>
				<img src="img/snowxiong.png" class="xiaoxiong"/>
			</div>
			
		</div>
	</body>
</html>

结果：
在这里插入图片描述

3D移动

Transform:translate3d(x,y,z)：其中x,y,z分别指向要移动的轴的方向的距离

透视perspective

要想实现3D效果，必须设置透视值perspective
在这里插入图片描述
D：视距：人的眼睛到屏幕的距离
Z：Z轴：物体距离屏幕的距离，Z轴越大（正值），物体距离我们就越近，我们看到的物体就越大，成像也越大
注意：
（1）透视我们也称为视距，视距就是指人的眼睛到屏幕的距离
（2）距离视觉点越近的在电脑平面成像越大，越远成像越小，所以透视值（perspective）设置得越小，看的像越大，设置得越大，看的越小
（3）透视的单位是像素
（4）透视写在被观察元素的父盒子上面

3D旋转

左手准则：左手的手指指向x,y,z轴的正方向，其余手指弯曲方向就是以各个轴为轴线所旋转的正方形
沿X轴旋转（水平旋转）：例子：单杠旋转
沿Y轴旋转（垂直旋转）：例子：原地转圈
沿Z轴旋转：例子：大转盘抽奖
Transform:rotate3d(1,0,0,45deg)=transform:rotate(45deg)：沿X轴正方向旋转45度
Transform:rotate3d(1,1,0,45deg)：沿X轴与Y轴对角线正方向旋转45度
Transform:rotate(x,y,z,deg)：沿着自定义轴旋转deg为角度

3D转换transfrom-style

3D呈现transfrom-style：控制子元素是否开启三维立体环境
Transform-style:flat：子元素默认不开启3d立体空间
Transform-style:preserve-3d：子元素开启立体空间
代码写给父级，但是影响的是所有子盒子（包括孙子盒子这些）

总结

要想实现3D效果，有两个必不可少的条件
1、设置透视值（给父元素或者父元素以上设置）
2、设置transform-style为preserve-3d

3D练习：旋转图片

自动循环播放图片，类似旋转木马

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style type="text/css">
			body{
				/*视距越小，成像越大*/
				perspective: 700px;
			}
			#a1{
				width: 250px;
				height: 150px;
				background-color: gray;
				margin: 250px auto;
				background: url(img/xuanzhuan/lanren_07.jpg) no-repeat;
				background-size: cover;
				position: relative;
				/*开启三维立体环境*/
				transform-style: preserve-3d;
				animation: rotate 12s linear infinite;
			}
			#a1:hover{
				animation-play-state: paused;
			}
			@keyframes rotate{
				from{
					transform: rotateY(0);
				}
				to{
					transform: rotateY(360deg);
				}
			}
			#a1 div{
				width: 100%;
				height: 100%;								
				position: absolute;
				left: 0;
				top: 0;
			}
			#a1 div:nth-child(1){
				background: url(img/xuanzhuan/lanren_01.jpg) no-repeat;
				background-size: cover;
				transform: translateZ(250px);
			}
			#a1 div:nth-child(2){
				background: url(img/xuanzhuan/lanren_02.jpg) no-repeat;
				background-size: cover;
				/*先旋转再移动*/
				transform: rotateY(60deg) translateZ(250px);
			}
			#a1 div:nth-child(3){
				background: url(img/xuanzhuan/lanren_03.jpg) no-repeat;
				background-size: cover;
				/*先旋转再移动*/
				transform: rotateY(120deg) translateZ(250px);
			}
			#a1 div:nth-child(4){
				background: url(img/xuanzhuan/lanren_04.jpg) no-repeat;
				background-size: cover;
				/*先旋转再移动*/
				transform: rotateY(180deg) translateZ(250px);
			}
			#a1 div:nth-child(5){
				background: url(img/xuanzhuan/lanren_05.jpg) no-repeat;
				background-size: cover;
				/*先旋转再移动*/
				transform: rotateY(240deg) translateZ(250px);
			}
			#a1 div:nth-child(6){
				background: url(img/xuanzhuan/lanren_06.jpg) no-repeat;
				background-size: cover;
				/*先旋转再移动*/
				transform: rotateY(300deg) translateZ(250px);
			}			
		</style>
	</head>
	<body>
		<div id="a1">
			<div></div>
			<div></div>
			<div></div>
			<div></div>
			<div></div>
			<div></div>
		</div>		
	</body>
</html>

结果：
在这里插入图片描述

浏览器私有前缀

-moz-：代表firebox浏览器私有属性
-ms-：代表ie，浏览器私有属性
-webkit-：代表safari、chrome私有属性
-o：代表Opera私有属性

提倡的写法：
-moz-border-radius:10px
-ms-border-radius:10px
-webkit-border-radius:10px（谷歌可省略-webkit-）
-o-border-radius:10px

裂缝中的豆芽
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
CSS3 -- API学习 (2D、3D动画效果)
坤少IT之路
04-04 272
一、2D效果 1.translate(xpx,ypx)、translateX(xpx),translateY(ypx) 右平移xpx，左平移ypx <!DOCTYPE html> <html> <head> <meta charset="utf-8"> &lt...
CSS学习笔记 07、2D与3D转换
每个人都是独一无二的，把握好自己的节奏，跟着自己的心走。
05-06 496
文章目录前言一、2D变形1.1、旋转变形transform: rotate(度数)-旋转角度，默认中心点旋转transform-origin属性(定义旋转点)1.2、缩放变形transform: scale(数字)-缩小与放大1.3、斜切变形transform: skew(角度，角度)1.4、位移变形transform：translate(px，px)二、3D转换2.1、绕X轴、Y轴旋转(rotateX、rotateY)2.2、空间移动(rotateX或rotateY配合translatex,y,z使用)介
CSS动画，2D，3D知识点总结，笔记心得
minmin66666的博客
03-12 667
这一块，我只是学了皮毛，虽然现在有很多包，但是学会动画的基本操作也很重要。动画的本质其实就是定时器（我的理解）。后面会学到定时器。一帧一帧模拟出动画。 若有错误不足，请多多指教，我只是个萌新。谢谢谢谢谢谢。 这是我一次性一起整理的，方便自己也方便大家，在偶尔记忆不清晰的时候查阅。
css中的“ transform: translate(-50%, -50%)； “的意思
最新发布
qq_45207162的博客
06-14 5470
这种特定的用法（translate(-50%, -50%)）经常和 position: absolute;这里的原理是，首先通过 top: 50%;将元素的左上角移到其容器的中心，然后再通过 translate(-50%, -50%) 向左和向上移动元素的一半宽度和一半高度，以此达到完全居中的效果。在 translate(-50%, -50%) 中，元素将在水平和垂直方向上各自移动其自身宽度或高度的50%的距离。在CSS中，transform: translate(-50%, -50%);
如何使用css完成视差滚动效果?
Harley567
10-12 1795
如何使用css完成视差滚动效果?
CSS3立方体3D旋转加载动画.zip
05-14
总的来说，"CSS3立方体3D旋转加载动画"是一个很好的学习资源，它涵盖了CSS3的3D转换、动画和透视等核心概念，同时展示了如何将这些技术应用于实际的前端项目中，对于想要提升前端开发能力的人员来说非常有价值。
纯CSS3实现的3D小球动画在线演示
06-12
【标题】：“纯CSS3实现的3D小球动画在线演示” 在网页设计与开发领域，CSS3（层叠样式表第三版）的引入为设计师和开发者提供了丰富的样式和动画功能，大大增强了网页的视觉效果。本项目标题“纯CSS3实现的3D小球...
CSS3实现3D文字动画效果
12-04
CSS3是现代网页设计中的一个重要工具，它提供了丰富的样式功能，包括2D和3D转换、过渡和动画，使我们可以制作出动态且交互性强的网页元素。 首先，让我们看看给定的代码片段。这段代码定义了一个具有3D动画效果的...
CSS3 3D圆点波浪动画特效
06-24
在本文中，我们将深入探讨"CSS3 3D圆点波浪动画特效"这一主题，它是一种创新且引人入胜的网页设计技术，能够为用户提供动态、视觉丰富的体验。CSS3，即层叠样式表第三版，是现代网页设计的基础，其中包含了许多新的...
CSS3制作3D骰子旋转动画特效
06-24
在本教程中，我们将深入探讨如何使用CSS3创建一个3D骰子旋转动画特效，这是一种交互式的视觉效果，用户可以通过鼠标移动来控制正方体的旋转。CSS3是层叠样式表的最新版本，它引入了许多强大的新特性，包括3D变换和...
移动端利用translate来添加滑屏效果，并且添加自定义滚动条
冰雪为融的博客
06-02 4041
移动端会有默认事件，比如滚动条、长按菜单、选中文字等等，很多是我们不想要的，所以，我们做的时候，一般会阻止默认事件，然后自然就把所有的默认事件阻止了，包括滚动条，那么此时我们就要自己用代码实现滑屏效果了实现的方法有很多，比如用定位，改变top值，但我们知道，改变top值，会不断的引起回流，是很影响性能的，所以我们尽量不要用这种方法，所以在移动端，实现移动效果，比较推荐的就是利用translate来...
css百分比问题——`top`、`left`、'translate'的百分比参照谁？
06-05 1514
比如 top、left、transform属性的translate方法，他们的百分比都是相较谁而言的？ top、left是基于父元素的： .parent { position: relative; background-color: rgb(243, 225, 225); height: 100px; width: 240px; } .child { ...
CSS3变形
m0_72943141的博客
07-28 1369
CSS3变形是一些效果的集合 平移 transform: translate(100px,100px); 旋转 transform: rotate(30deg); 缩放 transform: scale(2); 倾斜 transform: skew(5deg,5deg);
bootstrap 如何让div内部垂直居中？
渐渐的忘记，赶不上明天（读研ing，2024年毕业）
02-18 6855
选中要居中的元素，然后设置其css属性：transform: translateY(50%); 代码： <!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE...
CSS 转换---transform
weixin_49694589的博客
08-03 128
CSS 转换---transform一、移动--- translate二、旋转--- rotate三、缩放---scale总结--2D 转换综合写法 一、移动— translate transform: translate(X，Y); 1.百分比单位是相对于自身元素的 2.不会影响到其他元素的位置 3.对行内标签没有效果 百分比单位的应用盒子垂直居中： translate:(-50%,-50%);替换margin负值 应用代码如下： <style> .box1
获取滚动条距离控制页面样式
m0_62852343的博客
05-18 130
<template> <h3 class="textChangee" :style="{ transform: translatechange }">xxx</h3> </template> <script> export default { data() { return { translatechange: 'translateX(0%)' } }, methods: {...
Transform形状变换
我本浪人--游吟世间
09-03 512
Transform形状变换 transform属性向元素应用 2D 或 3D 转换。该属性允许我们对元素进行移动、缩放、旋转或倾斜。 ①移动: translate translateX() translateY() translateZ() //有3D效果 translate3d(x,y,z) //有3D效果 简写：translate()——translate(x,y) <...
css3动画属性解析:【transform -变形】
w15228212327_cc的博客
06-19 687
前面几篇文章我们已经一起学习了animation和transition 的使用，今天我们终于开始学习transform和translate了，其实translate只是transform的一个属性，只是很多初学者对transform（变形）、translate（移动）和transition（过渡）容易混淆，所以我把它们放到一块来写了，小伙伴们可不要混淆啊。 ...
CSS Transform让百分比宽高布局元素水平垂直居中
笔记
10-26 768
CSS Transform让百分比宽高布局元素水平垂直居中 很早以前了解过当元素是固定宽度和高度的时候，水平垂直高居中的方法可以设置margin的负值来使其居中，这个负值是元素的宽和高的一半，比如宽高是100px，那么就用margin-left:-50px;margin-top:-50px这样的写法。但如果这个元素的宽高是用百分比表示呢？ 如果使用百分比来设置宽高的话，以前哪个负值方法已经用不上了，这个我们发现在一个小的窍门，就是使用CSS3中的transform的translate转换属性。下面来

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值