CSS3过渡与转换详解-优快云博客

本文链接：https://blog.youkuaiyun.com/qq_42760119/article/details/107219075

本文总结了CSS3中的过渡和转换特性，包括transition属性的四个部分：duration、timing-function、delay和property，以及2D和3D转换的多个方法如perspective、rotateX、rotateY、rotateZ和transform-style。通过实例展示了3D立方体旋转效果和选项框与label的联动应用。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

一、过渡

过渡属性：transition

transiton主要用来设置四个过渡属性，分别为：

transition-property：规定设置过渡效果的css属性的名称

transition-duration：规定完成过渡效果需要的时间

transition-timing-function：规定速度效果的速度曲线

属性值：

ease：（默认值），速度为从慢到快再到慢

linear：速度为线性速度

ease-in：从慢到快的过程

ease-out：从快到慢的过程

cubic-bezier()：通过设置贝塞尔曲线数值或直接在浏览器调节获取贝塞尔曲线，自定义速度变化趋势

transition-delay：规定过渡效果何时开始

实例如下:

<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style type="text/css">
			#d1{
				width: 100px;
				height: 100px;
				background: skyblue;
				
				/*过渡效果*/
				transition:width 2s;
				
				/*规定设置过渡效果的属性*/
				transition-property: width;
				/*设置过渡的时间*/
				transition-duration:2s;
				/*设置整个过渡变化的速度*/
				transition-timing-function:cubic-bezier(0, 0.95, 1,0.07);
				/*设置延迟时间*/
				transition-delay: 2s;
				}
			#d1:hover{
				width:400px;
				height: 100px;
			}
		</style>
	</head>
	<body>
		<div id="d1">
			
		</div>
	</body>
</html>

二、转换

2d转换


translate(x,y)	定义 2D 移动，沿着 X 和 Y 轴移动元素。
translateX(n)	定义 2D 移动，沿着 X 轴移动元素
translateY(n)	定义 2D 移动，沿着 Y 轴移动元素。
rotate(angle)	定义 2D 旋转，在参数中规定角度，正值时顺时针旋转，负值时逆时针旋转。

3d转换

1、perspective属性
perspective 属性定义 3D 元素距视图的距离，以像素计。该属性允许您改变 3D 元素查看 3D 元素的视图。
当为元素定义 perspective 属性时，其子元素会获得透视效果，而不是元素本身。

语法： perspective: number|none;

属性值：

number：元素距离视图的距离，以像素计

none：默认值。与 0 相同。不设置透视。

2、rotateX方法

通过 rotateX() 方法，元素围绕其 X 轴以给定的度数进行旋转

div {    
	transform: rotateX(120deg); 
    }

3、rotateY方法
通过 rotateY() 方法，元素围绕其 Y 轴以给定的度数进行旋转

div {    
 transform: rotateY(120deg); 
    }

4、rotateZ
3D空间旋转指定的角度，沿着垂直于Z轴的方向顺指针旋转。

div {    
 transform: rotateZ(120deg); 
    }

5、transform-style属性

规定如何在3D空间中呈现被嵌套的元素

语法：transform-style：flat|preserve-3d

属性值：

flat：子元素将不保留其3D位置

preserve-3d：子元素将保留其3D位置

3d魔方实例：

<html>
	 <head>
  		<meta charset="UTF-8">
		<style type="text/css">
		   body{
		    perspective: 1000px;
		   }
		   
		   .lifang{
			    width:200px;
			    height:200px;
			    margin: 200px auto;
			    position:relative;
			    /*设置transform-style:保留子元素3d效果*/
			    transform-style: preserve-3d;
			    transform: rotate3d(1,1,1,0deg);
			    transition: all 5s;
			   }
		   .lifang:hover{
			    transform: rotate3d(1,1,1,720deg);
  			 }
   
		   .page{
			    width:200px;
			    height: 200px;
			    position: absolute;
			    left: 0;
			    top: 0;
			    /*设定透明度*/
			    opacity: 0.6;
			}
		   
		   .front{
			    background-image: url(../img/1.jpg);
			    background-size: 100% auto;
			    transform: translateZ(100px);
		   }
   
		   .back{
			    background-image: url(../img/2.jpg);
			    background-size: 100% auto;
			    transform: translateZ(-100px);
		}
			   
		   .right{
			    background-image: url(../img/3.jpg);
			    background-size: auto 100%;
			    transform: rotateY(90deg) translateZ(100px);
  		 }
   
		   .left{
			    background-image: url(../img/4.jpg);
			    background-size: auto 100%;
			    transform: rotateY(-90deg) translateZ(100px);		
		 }
	   
		   .top{
			    background-image: url(../img/5.jpg);
			    background-size:auto 100%;
			    transform: rotateX(90deg) translateZ(100px);
	  	 }
	   
		   .bottom{
			    background-image: url(../img/6.jpg);
			    background-size:auto 100%;
			    transform: rotateX(-90deg) translateZ(100px);
		   }
		  </style>
 	  </head>
	 <body>
 		 <div class="lifang">
	  		 <div class="page front"></div>
	   		 <div class="page back"></div>
	  		 <div class="page left"></div>
	  		 <div class="page right"></div>
	  		 <div class="page top"></div>
	  		 <div class="page bottom"></div>
	 	</div>
	 </body>
</html>

实现效果：可动态旋转

（木有错，是wuli千玺哦！）
在这里插入图片描述