transform属性介绍，css3中的transform属性详解

阅读量： 68 发布日期： 2022-11-03 08:36:39

CSS3的transform属性可以用来对元素进行平移、旋转、缩放等操作，这样就可以很方便的实现多种效果。本文将为大家介绍transform属性的基本用法。

1、css3 transform属性

CSS3的transform属性允许我们对元素进行旋转、缩放、倾斜或移动。除此之外，还可以使用matrix()方法对元素进行变形。其中，transform-origin属性规定了被变形元素的中心位置。transform属性是一个组合属性，因此我们可以将多个变形添加到元素中。语法：

2、transform的基本使用

transform属性允许你对元素进行变形，包括旋转、缩放、移动或倾斜。这个属性允许你使用2D或3D转换来对元素进行变形。要使用transform属性，你需要在元素上指定一个变形方法（transform method）。有几种变形方法可以使用，包括rotate()（旋转）、scale()（缩放）、translate()（移动）、skew()（倾斜）和matrix()（使用矩阵来变换元素）。下面的例子将旋转元素45度：

3、旋转

CSS3的transform属性允许你对元素进行各种变形操作，包括旋转、缩放、倾斜或者移动元素。通常我们使用transform来实现图片翻转和旋转的效果，那么transform属性到底有哪些？下面就让我们一起来看看吧。transform属性包含了这些值：rotate：旋转scale：缩放skew：倾斜translate：移动

1）HTML代码：

<p></p>

2）CSS代码：

p{  
    width: 300px;  
    height: 300px;  
    background-color: lightblue;  
    -ms-transform:rotate(45deg);/*IE9*/    
    -moz-transform:rotate(45deg);/*Firefox*/ 
    -webkit-transform:rotate(45deg);/*Safari和chrome*/ 
    -o-transform:rotate(45deg);/*Opera*/ 
}

4、翻转

这是文章第4段，主要介绍transform属性的翻转。翻转是指对元素进行翻转操作。翻转操作可以沿着X轴、Y轴和Z轴进行。首先，我们来看看沿着X轴的翻转。要想实现沿着X轴的翻转，我们需要使用rotateX()方法。该方法接收一个度数值，表示元素翻转的角度。下面是一个例子：

1）HTML代码：

<p class="main">  
    <p class="p"></p>  
</p>

2）CSS代码：

.main{  
    width: 100%;  
    height: 500px;  
    background-color: lightcoral;  
    margin-left: 140px;  
    margin-top: 180px;  
}  
.p{  
    width: 300px;  
    height: 300px;  
    background-color: lightblue;  
    -ms-transform:rotate(30deg);/*IE9*/    
    -moz-transform:rotate(30deg);/*Firefox*/ 
    -webkit-transform:rotate(30deg);/*Safari和chrome*/ 
    -o-transform:rotate(30deg);/*Opera*/ 
       
    transform-origin: center;  
    /*transform-origin: top;*/ 
    /*transform-origin: top left;*/ 
    /*transform-origin: right top;*/ 
    /*transform-origin: left;*/ 
    /*transform-origin: right;*/ 
    /*transform-origin: bottom left;*/ 
    /*transform-origin: bottom;*/ 
    /*transform-origin: bottom right;*/  
}