Rotating a div in HTML and CSS is not achieving the desired 180-degree rotation

Having trouble implementing a Fill animation that goes from the bottom to the top of the box .box-inner-1. The CSS Rotate property seems to be malfunctioning!

$('.box-inner-1').css({
  top: '0'
}).animate({
  "height": 260
}, 4000);
.wrapper {
  position: relative;
  height: 260px;
  width: 260px;
  padding: 0px !important;
  background: #ddd;
}
.box-inner-1 {
  position: absolute;
  height: 0px;
  left: 0;
  right: 0;
  background-color: greenyellow;
  -ms-transform: rotate(-180deg);
  -webkit-transform: rotate(-180deg);
  transform: rotate(-180deg);

}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="wrapper">
  <div class="box-inner-1"></div>
</div>

Answer №1

To make the box animate from the top to bottom, simply change bottom: '0' to top: '0'.

$('.box-inner-1').css({
  top: '0'
}).animate({
  "height": 260
}, 4000);
.wrapper {
  position: relative;
  height: 260px;
  width: 260px;
  padding: 0px !important;
  background: #ddd;
}
.box-inner-1 {
  position: absolute;
  height: 0px;
  left: 0;
  right: 0;
  background-color: greenyellow;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="wrapper">
  <div class="box-inner-1"></div>
</div>

Answer №2

Verify the transform-origin property is set to center

Answer №3

It appears that the rotation is already set from the start - refer to my code snippet for an example where I have included some text in a DIV element displayed upside down. If you were anticipating an animated rotation, it seems like that feature was not specified anywhere within the code.

$('.box-inner-1').css({
  top: '0'
}).animate({
  "height": 260
}, 4000);
.wrapper {
  position: relative;
  height: 260px;
  width: 260px;
  padding: 0px !important;
  background: #ddd;
}
.box-inner-1 {
  position: absolute;
  height: 0px;
  left: 0;
  right: 0;
  background-color: greenyellow;
  -ms-transform: rotate(-180deg);
  -webkit-transform: rotate(-180deg);
  transform: rotate(-180deg);

}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="wrapper">
  <div class="box-inner-1">look here</div>
</div>

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Transmitting information through socket.emit from the client to the server

I'm facing an issue while trying to send numeric data from the client to the server using socket.emit. The problem is that the server doesn't seem to be receiving any data, as only `null` gets logged or I might be doing something wrong in my appr ...

What is the most efficient method for implementing uniform rounded corners in HTML/CSS across different web browsers?

Is there a simple way to achieve cross-browser compatibility without a lot of tedious work? I'm looking for a solution that works effortlessly on IE7+, FF2+, and Chrome, without resorting to using tables which may be outdated. Is there a middle ground ...

What is the reason for instanceof Map returning false?

Utilizing the Draft.js plugin called Mention. When accessing editorState.content.entityMap.mention, I am able to retrieve the value by: mention.get('address') However, when I attempt to verify if it is a Map using: console.log('mention&a ...

Create various designs for a section of a webpage

My goal is to create a coding playground using flex-box to position different panels. Here is an example in JSBin, with the following html code: <div class="flex-box"> <div class="col" id="html-panel"> <p>html</p> </div& ...

Can you explain the significance of these vertices in the box geometry in THREE.js?

After creating a box geometry using the code below: const hand1geo = new THREE.BoxGeometry(2, 0.01, 0.2); const material_sidehand = new THREE.MeshBasicMaterial({ color: 0x3cc1b7 }); const sidehand = new THREE.Mesh(hand1geo, material_sidehand); ...

The post processing effect in Three.js does not support FXAA when SSAO is activated

I am having trouble getting SSAO and FXAA effects to work together in this simple test scene. Enabling SSAO works fine, but when I also enable FXAA, the render turns black. In the provided fiddle, if you uncomment composer.addPass(FXAA_effect); you will s ...

Leveraging the power of the Google API within the Dojo module

Is it possible to integrate Google Maps API within a Dojo Toolkit module in the following way? define(["dojo/dom"], function (dom) { var input = dom.byId("searchBox"); var autocomplete = new google.maps.places.Autocomplete(input, options); } ...

Sending data to and retrieving data from a server

Just a quick query. I've been using ajax POST and GET methods to send JSON data to a server and then fetch it back. However, I'm facing some confusion while trying to extract JSON information from the GET call. getMessage = function(){ $.ajax ...

Loading an HTML page using jQuery's .load() method that contains embedded JavaScript

I'm facing an issue with loading .html pages (including JavaScript) into a div element. Below is my div setup: <div class="content"></div> This is my php code: <?php if(!$_POST['page']) die("0"); $page = (int)$_POST[&a ...

The static HTML export encountered an issue: 'Error: Server Component type not supported: {...}'

Encountered an error while attempting to export a next js blog page to static html. My goal is to obtain the basic html structure with tailwind CSS from this blog template. Following the instructions on the next js documentation, I made changes to module ...

Toggle the visibility of a div based on the user's session status

Having an admin link with the div id "admin" and starting sessions when a user is logged in helps distinguish between normal users and admins. While normal users are restricted access to files designated for admin only, they can still view the admin link. ...

How can I efficiently transfer information between AngularJS modules?

Angular offers the flexibility of creating independent Modules that can be reused in various parts of your application. Imagine having a module dedicated to managing lists, which you want to use across your entire application and populate in different ways ...

Damaged background in Bootstrap interface modal

https://i.stack.imgur.com/nTAnK.png Is there anyone who can assist me in identifying the issue causing the broken or irregular backdrop in the background of overlays or pop-ups? $scope.Modal = $modal.open({ animation: true, ...

Angular-oauth2-oidc does not successfully retrieve the access token when using OAuth2 and SSO

Here's an issue I'm facing: I've been attempting to integrate SSO and OAuth2 flow using angular-oauth2-oidc. When testing with POSTMAN and ThunderClient in VS Code, I managed to receive the correct response (the access_token). However, I am ...

How to use the var keyword in JavaScript to declare block-scoped variables

At this moment, my goal is to establish a block-scoped variable in JavaScript by utilizing the var keyword. I prefer not to utilize the let keyword due to compatibility issues with certain browsers in ecma6. Is there an optimal and universal method to ac ...

Synchronization issues arise when attempting to update the localStorage

Whenever I switch to dark mode, the update doesn't reflect in _app unless I have two tabs opened and trigger it in one tab. Then, the other tab gets updated with dark mode toggled, but not the tab where I pressed the toggle. I am using useSettings in ...

CSS styling doesn't take effect until the page is reloaded due to the failure of cssText

After generating a new list item, it appears that the CSS styling is not being inherited until the page is reloaded. Even though I have added styling using cssText dynamically, it doesn't seem to be working as expected. I've attempted using cssT ...

Unique custom CSS and meta tag options for enhancing iPad/iPhone user experience

Currently, I am developing a web application that integrates Extjs components, PHP, and MySQL. My main goal is to ensure that my application looks correct on the iPad. Are there any specific CSS rules or meta tags that I should be implementing for optima ...

Choosing a combination of classes

For my web application, I created checkboxes that control the visibility of windows by toggling classes on elements. My JavaScript code successfully achieves this functionality. $(document).ready(function(){ $('#field').change(function(){ ...

Radio buttons failing to transfer any data

I am experiencing an issue with setting values for radio buttons and using the $_POST variable to read the value, but the value being set is empty. <form style="text-align:left;margin-left:80px;" class="form-inline signup" role="form" method="post" act ...