How does CSS set up picture rotation?
May 29, 2021 Article blog
When we browse the web, we want the page to be rendered dynamically, rather than simply static pages, which helps enhance the user experience. F or example, in the case of an avatar, we'll set an effect such as rotation on it. S o how does the picture rotate? Here, the W3Cschool editor teaches you that you don't need JavaScript to rotate your picture with CSS.
Let's first look at how it works:
Specific code:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>CSS图片旋转 - 编程狮(w3cschool.cn)</title>
<style type="text/css">
div img{
transition:all 1s;
}
div:hover img{
transform:rotateY(180deg);/*将图片按Y轴180度旋转*/
}
</style>
</head>
<body>
<div><img src="https://7n.w3cschool.cn/statics/img/logo/[email protected]" alt="w3cschool"></div>
</body>
</html>Transform:rotate achieves a rotation effect, and if you change the above parameters to (90deg), the picture rotates only 90 degrees. In this code example, the picture collapses and disappears.
That's all CSS says about how to set up a picture rotation. For more CSS styles, follow W3Cschool.com.
Recommended course: CSS tutorial