search

Home >Web Front-end >Front-end Q&A >How to set transform in css

How to set transform in css

藏色散人
藏色散人Original
2021-05-27 11:33:492843browse

The syntax for setting transform in css is "transform: none|transform-functions;". This attribute can rotate, scale, move or tilt the element.

How to set transform in css

The operating environment of this article: Windows7 system, HTML5&&CSS3 version, DELL G3 computer

How to set up css transform?

The transform property applies a 2D or 3D transformation to an element. This property allows us to rotate, scale, move or tilt the element.

Syntax

transform: none|transform-functions;

How to set transform in css

Code example: 

<!DOCTYPE html>
<html>
<head>
<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 */
-moz-transform:rotate(7deg); /* Firefox */
-webkit-transform:rotate(7deg); /* Safari and Chrome */
-o-transform:rotate(7deg); /* Opera */
transform:rotate(7deg);
}

div.rotate_right
{
float:left;
-ms-transform:rotate(-8deg); /* IE 9 */
-moz-transform:rotate(-8deg); /* Firefox */
-webkit-transform:rotate(-8deg); /* Safari and Chrome */
-o-transform:rotate(-8deg); /* Opera */
transform:rotate(-8deg);
}
</style>
</head>
<body>

<div class="polaroid rotate_left">
<img src="/i/ballade_dream.jpg" alt="郁金香" width="284"    style="max-width:90%" />
<p class="caption">上海鲜花港的郁金香，花名：Ballade Dream。</p>
</div>

<div class="polaroid rotate_right">
<img src="/i/china_pavilion.jpg" alt="世博中国馆" width="284"    style="max-width:90%" />
<p class="caption">2010年上海世博会，中国馆。</p>
</div>


</body>
</html>

Effect:

How to set transform in css

Recommended: "HTML video tutorial" "css video tutorial"

The above is the detailed content of How to set transform in css. For more information, please follow other related articles on the PHP Chinese website!

Statement：
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
Previous article：How to set italics in cssNext article：How to set italics in css

Related articles

See more