What does transform mean in html?-HTML Tutorial-php.cn

Home

Web Front-end

HTML Tutorial

What does transform mean in html?

醉折花枝作酒筹

Apr 25, 2021 pm 06:06 PM

html transform

In HTML, transfrom means "conversion", allowing elements to apply 2D or 3D transformation, the syntax is "transform:none|transform-functions". The transfrom attribute allows element rotation, skew, scale and other transformations.

What does transform mean in html?

The operating environment of this tutorial: Windows 7 system, CSS3&&HTML5 version, Dell G3 computer.

Attribute definition and usage instructions

The Transform property is applied to the 2D or 3D transformation of the element. This property allows you to rotate, scale, move, tilt, etc. the element.

Grammar

transform: none|transform-functions;

Copy after login

What does transform mean in html?

Example:

<!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="/static/imghw/default1.png"  data-src="pulpitrock.jpg"  class="lazy"   alt=""    style="max-width:90%"  style="max-width:90%">
<p class="caption">The pulpit rock in Lysefjorden, Norway.</p>
</div>

<div class="polaroid rotate_right">
<img src="/static/imghw/default1.png"  data-src="cinqueterre.jpg"  class="lazy"   alt=""    style="max-width:90%"  style="max-width:90%">
<p class="caption">Monterosso al Mare. One of the five villages in Cinque Terre.</p>
</div>


</body>
</html>

Copy after login

Effect:

What does transform mean in html?

Recommended learning: html video tutorial

The above is the detailed content of What does transform mean in html?. For more information, please follow other related articles on the PHP Chinese website!

Statement of this Website

The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn