认知css3中Transform中的属性

最新推荐文章于 2025-09-13 14:52:02 发布

原创最新推荐文章于 2025-09-13 14:52:02 发布 · 241 阅读

0 ·

CC 4.0 BY-SA版权

本文深入讲解CSS3中的Transform属性，包括translate、rotate、scale及skew的使用方法，通过实例展示如何实现元素的平移、旋转、缩放和扭曲效果。

css3手册：http://css.doyoe.com/

Transform

在这里插入图片描述

Transform：意思为变形的意思，它主要包括移动translate、旋转rotate、缩放scale、扭曲skew。

首先来认识一下移动translate

translate： translation为2D平移。第一个参数对应X轴，第二个参数对应Y轴。如果第二个参数未提供，则默认值为0，也可以单独的使用一个轴来平移。
translate3d： translation为3D位移。第1个参数对应X轴，第2个参数对应Y轴，第3个参数对应Z轴，参数不允许省略
html：

<div class="wrapper">
</div>

css：

.<style>
    .wrapper{
	width: 200px;
	height: 200px;
	background-image: url(img/img1.jpg); 
	background-repeat: no-repeat;
	background-size:200px 200px;
    margin: 50px auto;
	opacity:0.8;  
	transition: all 2s;  	
	}
.wrapper:hover {
    transform: translateX(100px);
    /*transform: translateY(100px);
    transform: translate3d(100px,100px,100px);
    */
   } 
	</style>

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

translateX(100px)向X轴平移100px,translateY(100px)向Y轴平移100px， translate3d(100px,100px,100px)向X,Y,Z平移100px；

rotate：rotate为2D旋转，参数为要旋转的角度。单位为deg。使用时最好与transform-origin一起使用。
rotate3d：rotate3d为3D旋转角度，其中前3个参数分别表示旋转的方向x,y,z，第4个参数表示旋转的角度，参数不允许省略。
html：

<div class="wrapper">
</div>

css：

<style>
	.wrapper{
	width: 200px;
	height: 200px;
	background-image: url(img/img1.jpg); 
	background-repeat: no-repeat;
	background-size:200px 200px;
    margin: 50px auto;
	opacity:0.8;  
	transition: all 2s;  	
	}
.wrapper:hover {
    transform: rotateX(60deg);
    /*transform: rotateY(45deg);
    */
   } 
	</style>

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

scale：scale为 scale 2D缩放。第一个参数对应X轴，第二个参数对应Y轴。如果第二个参数未提供，则默认取第一个参数的值。参数值比1小为缩放，比1大为扩展。

html：

<div class="wrapper">
</div>

css：

    <style>
	.wrapper{
	width: 200px;
	height: 200px;
	background-image: url(img/img1.jpg); 
	background-repeat: no-repeat;
	background-size:200px 200px;
    margin: 50px auto;
	opacity:0.8;  
	transition: all 2s;  	
	}
.wrapper:hover {
    transform: scaleX(0.5);
    /*transform: scaleY(.5);*/
    
   }
   </style>

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

skew：skew指扭曲。第一个参数对应X轴，第二个参数对应Y轴。如果第二个参数未提供，则默认值为0，单位为deg（角度），也可以单独的使用，skewx()：X轴的（水平方向）扭曲，skewy()：Y轴的（垂直方向）扭曲。
html：

<div class="wrapper">
</div>

css：

	<style>
	.wrapper{
	width: 200px;
	height: 200px;
	background-image: url(img/img1.jpg); 
	background-repeat: no-repeat;
	background-size:200px 200px;
    margin: 50px auto;
	opacity:0.8;  
	transition: all 2s;  	
	}
.wrapper:hover {
    transform: skewX(-15deg);
    /*transform: skewX(-15deg);*/
    
   } 
	</style>

在这里插入图片描述

**总结：**使用这些属性时，可以搭配@keyfroms来一起用，效果更加明显。