transform在html是什么意思

在htML中，transFrom的意思是“转换”，让元素应用2D或3D转换，语法“transform:none|transform-functions”。transfrom属性允许元素旋转rotate、扭曲skew、缩放scale等转换。

本教程操作环境：windows7系统、CSS3& & HTML5版、Dell G3电脑。

属性定义及使用说明

Transform属性应用于元素的2D或3D转换。这个属性允许你将元素旋转，缩放，移动，倾斜等。

语法

transform: none|transform-functions;
    

实例：

!DOCTYPE html>
    html>
    head>
    meta charset="utf-8">
     tITle>
    菜鸟教程(runoob.COM)/title>
    style>
 body{
    	margin:30px;
    	background-color:#E9E9E9;
}
div.polaROId{
    	width:294px;
    	padding:10px 10px 20px 10px;
    	border:1px solid #BFBFBF;
    	background-color:white;
    	/* Add box-shadow */	box-shadow:2px 2px 3px #aaaaaa;
}
div.rotate_left{
    	float:left;
    	-ms-transform:rotate(7deg);
     /* IE 9 */	-webkit-transform:rotate(7deg);
     /* Safari and Chrome */	transform:rotate(7deg);
}
div.rotate_right{
    	float:left;
    	-ms-transform:rotate(-8deg);
     /* IE 9 */	-webkit-transform:rotate(-8deg);
     /* Safari and Chrome */	transform:rotate(-8deg);
}
    /style>
    /head>
    body>
    div class="polaroid rotate_left">
    img src="pulpitrock.jpg" alt="" width="284" height="213">
    p class="caption">
    The pulpit rock in Lysefjorden, Norway./p>
    /div>
    div class="polaroid rotate_right">
    img src="cinqueterre.jpg" alt="" width="284" height="213">
    p class="caption">
    Monterosso al Mare. One of the five villages in Cinque Terre./p>
    /div>
    /body>
    /html>
    

效果：

推荐学习：html视频教程

以上就是transform在html是什么意思的详细内容，更多请关注其它相关文章！

声明：本文内容由网友自发贡献，本站不承担相应法律责任。对本内容有异议或投诉，请联系2913721942#qq.com核实处理，我们将尽快回复您，谢谢合作！