Home > Article > Web Front-end > Can css3 make images tilt?
Can css3 make images tilt?
- WBOYOriginal
- 2022-04-28 16:18:492546browse
css3 can tilt the image; you can use the transform attribute with the skew() method to tilt the image. The transform attribute allows you to tilt the element. The skew() method is used to set the tilt transformation of the element. The syntax "picture element" {transform:skew(x-axis angle, y-axis angle)}”.
The operating environment of this tutorial: Windows 10 system, CSS3&&HTML5 version, Dell G3 computer.
Can css3 make the picture tilt?
css3 can make the picture tilt
You can use the transform attribute and the skew() method.
The transform property applies a 2D or 3D transformation to an element. This property allows us to rotate, scale, move or tilt the element.
skew means "skew" and is a built-in function in css that needs to be used together with the transform attribute for skew transformation of elements.
The syntax is
skew(x-angle,y-angle)
Define a 2D tilt transformation along the X and Y axes.
Or:
skewX(angle) Defines a 2D skew transformation along the X-axis.
skewY(angle) Defines the 2D skew transformation along the Y axis.
The example is as follows:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
.img1{
width:100px;
height:100px;
transform:skew(30deg,30deg);
}
</style>
</head>
<body>
<img src="1118.02.png" class="img1" alt="Can css3 make images tilt?" >
<img src="1118.02.png" alt="">
</body>
</html>Output result:
(Learning video sharing: css video Tutorial)
The above is the detailed content of Can css3 make images tilt?. For more information, please follow other related articles on the PHP Chinese website!