Shulou(Shulou.com)06/01 Report--

This article introduces the relevant knowledge of "how to rotate pictures with css in web design". In the operation of actual cases, many people will encounter such a dilemma, so let the editor lead you to learn how to deal with these situations. I hope you can read it carefully and be able to achieve something!

Step 1:

After creating a new file, we start to write one of our pictures and set the width and height of the picture in the picture, the code is as follows:

Rotate picture settings

Step 2:

Next, let's set the css style. We use an inline style here, using the style tag directly under the header to add the style. The code is as follows:

Div {width: 436px; height: 436px; margin: 100px auto; position: relative;} div img {position: absolute Transition: all 2s;} div:hover img {transform: rotate (90deg);}

In the code, we mainly use the relative and absolute attributes in position, and also use two elements, transition and transform, transition this element is mainly to let us see the process of change, but the "2s" in the code indicates excessive time. Transform represents the direction and angle of rotation of the picture.

This is the end of the content of "how to rotate a picture with css in web design". Thank you for reading. If you want to know more about the industry, you can follow the website, the editor will output more high-quality practical articles for you!

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.