本文摘自PHP中文网,作者醉折花枝作酒筹,侵删。
在html中,transfrom的意思是“转换”,让元素应用2D或3D转换,语法“transform:none|transform-functions”。transfrom属性允许元素旋转rotate、扭曲skew、缩放scale等转换。
本教程操作环境:windows7系统、CSS3&&HTML5版、Dell G3电脑。
属性定义及使用说明
Transform属性应用于元素的2D或3D转换。这个属性允许你将元素旋转,缩放,移动,倾斜等。
语法
1 | transform: none|transform-functions;
|
实例:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 | <!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;
box-shadow:2px 2px 3px #aaaaaa;
}
div.rotate_left
{
float:left;
-ms-transform:rotate(7deg);
-webkit-transform:rotate(7deg);
transform:rotate(7deg);
}
div.rotate_right
{
float:left;
-ms-transform:rotate(-8deg);
-webkit-transform:rotate(-8deg);
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是什么意思的详细内容,更多文章请关注木庄网络博客!
相关阅读 >>
html dir标签是干啥的?<dir>标签的具体定义和属性介绍
html怎样使用style添加属性
html font标签是什么?<font>标签的属性的详细介绍
html里的事件怎么使用
html文本格式化的实例详解
html怎么给按钮换颜色?html button标签的使用介绍
script标签在html中的作用是什么?script标签中type属性的用法是什么?
怎么在标签中写css样式
html如何设置点击超链接变成灰色
html中段落是通过什么定义的
更多相关阅读请进入《transform》频道 >>
人民邮电出版社
本书对 Vue.js 3 技术细节的分析非常可靠,对于需要深入理解 Vue.js 3 的用户会有很大的帮助。——尤雨溪,Vue.js作者
转载请注明出处:木庄网络博客 » transform在html是什么意思