How to rotate div using jquery-Front-end Q&A-php.cn

How to rotate div using jquery

WBOY

Release： 2023-05-28 09:16:07

Original

689 people have browsed it

With the continuous development of Web technology, animation effects play an increasingly important role in web design. Among them, the rotation effect is a very common and eye-catching animation effect. So, in this article, we will introduce how to use jQuery to achieve a simple div rotation effect.

The basic idea of using jQuery to achieve the div rotation effect is to use the transform attribute in CSS3 to rotate the div element by a certain angle along the Y axis. At the same time, we need to define some key CSS styles, such as rotation speed and animation easing functions. Then, use the animate() function in jQuery to apply these CSS styles to the div element to achieve a simple div rotation animation.

The following are the specific implementation steps:

Create a div element and define the basic style

First, we need to add a div to the HTML code element. This div element will be used by us to demonstrate the rotation effect. Here, we first define a div element with class "box" and define some basic CSS styles for it:

<div class="box">Hello, World!</div>

<style>
.box {
   width: 200px;
   height: 200px;
   background-color: #f0f0f0;
   border-radius: 10px;
   text-align: center;
   line-height: 200px;
   font-weight: bold;
   font-size: 24px;
}
</style>

Copy after login

Define rotation style

Since what we want to achieve is an animation effect of rotation along the Y axis, we need to define the rotation style. Here, we define a CSS style named "rotate" to rotate the div element 180 degrees along the Y axis:

.rotate {
  transform: rotateY(180deg);
}

Copy after login

Using jQuery to achieve animation effects

Next, we need to use jQuery's animate() function to apply the "rotate" style to the div element, and set attributes such as rotation speed and animation easing function. Here, we set the rotation speed to 1 second (1000 milliseconds) and use the "ease-in-out" easing function, as well as a callback function to change the text content in the div:

$('.box').click(function(){
   $(this).animate({width: 'toggle'}, 1000, 'ease-in-out', function(){
      $(this).toggleClass('rotate');
      $(this).text('Hello, jQuery!');
   });
});

Copy after login

in the above In the code, we use a click event to trigger the rotation animation. When the div element is clicked, it will first shrink and disappear, then rotate 180 degrees, and finally a new text content will pop up.

At this point, we have completed a simple div rotation animation effect. The complete code is as follows:

<!DOCTYPE html>
<html>
<head>
   <meta charset="UTF-8">
   <title>Div旋转效果</title>
   <style>
      .box {
         width: 200px;
         height: 200px;
         background-color: #f0f0f0;
         border-radius: 10px;
         text-align: center;
         line-height: 200px;
         font-weight: bold;
         font-size: 24px;
      }
      
      .rotate {
         transform: rotateY(180deg);
      }
   </style>
   <script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
   <script>
      $(document).ready(function(){
         $('.box').click(function(){
            $(this).animate({width: 'toggle'}, 1000, 'ease-in-out', function(){
               $(this).toggleClass('rotate');
               $(this).text('Hello, jQuery!');
            });
         });
      });
   </script>
</head>
<body>
   <div class="box">Hello, World!</div>
</body>
</html>

Copy after login

Summary

In this article, we introduced how to use jQuery to implement a simple div rotation animation effect. Although this effect is simple, it demonstrates the important role of jQuery in the implementation of animation effects. Of course, we can also achieve more complex animation effects by further learning and mastering more jQuery skills.

The above is the detailed content of How to rotate div using jquery. For more information, please follow other related articles on the PHP Chinese website!