cari

Rumah  >  Artikel  >  hujung hadapan web  >  transform在html是什么意思

transform在html是什么意思

醉折花枝作酒筹
醉折花枝作酒筹asal
2021-04-25 18:06:5310746semak imbas

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

transform在html是什么意思

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

属性定义及使用说明

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

语法

transform: none|transform-functions;

O%LD9}CYV2IEWE9WBHVMZ@5.png

实例：

<!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视频教程

Atas ialah kandungan terperinci transform在html是什么意思. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!

html5 css3 html transform
Kenyataan：
Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn
Artikel sebelumnya：html div标签什么意思Artikel seterusnya：html中表单的标签是什么

Artikel berkaitan

Lihat lagi