transform在html是什么意思


本文摘自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;

O%LD9}CYV2IEWE9WBHVMZ@5.png

实例:

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;

    /* 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>

效果:

KKH0{600@F]5DN9ZZW~Z{HX.png

推荐学习:html视频教程

以上就是transform在html是什么意思的详细内容,更多文章请关注木庄网络博客

相关阅读 >>

html dir标签是干啥的?<dir>标签的具体定义和属性介绍

html怎样使用style添加属性

html font标签是什么?<font>标签的属性的详细介绍

html里的事件怎么使用

html文本格式化的实例详解

html怎么给按钮换颜色?html button标签的使用介绍

script标签在html中的作用是什么?script标签中type属性的用法是什么?

怎么在标签中写css样式

html如何设置点击超链接变成灰色

html中段落是通过什么定义的

更多相关阅读请进入《transform》频道 >>




打赏

取消

感谢您的支持,我会继续努力的!

扫码支持
扫码打赏,您说多少就多少

打开支付宝扫一扫,即可进行扫码打赏哦

分享从这里开始,精彩与您同在

评论

管理员已关闭评论功能...