CSS transforms the entire div, ensuring that all elements within it remain

When I try to rotate a set of divs using the following code:

map-grid:
-webkit-transform:skewX(-45deg) rotate(15deg) scaleX(1.785) scaleY(.8) translateX(7em) translateY(-4.5em);
    -moz-transform:skewX(-45deg) rotate(15deg) scaleX(1.785) scaleY(.8) translateX(7em) translateY(-4.5em);
    -ms-transform:skewX(-45deg) rotate(15deg) scaleX(1.785) scaleY(.8) translateX(7em) translateY(-4.5em);
    -o-transform:skewX(-45deg) rotate(15deg) scaleX(1.785) scaleY(.8) translateX(7em) translateY(-4.5em);
    transform:skewX(-45deg) rotate(15deg) scaleX(1.785) scaleY(.8) translateX(7em) translateY(-4.5em);

which is supposed to create an isometric grid, the content inside each div remains rotated. To fix this, I tried:

map-grid-cell-content:
-webkit-transform: none; 
       -moz-transform: none; 
        -ms-transform: none; 
         -o-transform: none; 
            transform: none;

Here is the basic structure of the markup:

<div class='map-container'>
  <div class='map-grid'>

    <div class="map-grid-cell-content">
       << the content that should not be rotated >>
    </div>

  </div>
</div>

Unfortunately, the content inside the divs still appears rotated. Any suggestions on how to make this work as intended?

csstransformskew

Answer №1

.map-grid {
  -webkit-transform:skewX(-45deg) rotate(15deg) scaleX(1.785) scaleY(.8) translateX(7em) translateY(-4.5em);
    -moz-transform:skewX(-45deg) rotate(15deg) scaleX(1.785) scaleY(.8) translateX(7em) translateY(-4.5em);
    -ms-transform:skewX(-45deg) rotate(15deg) scaleX(1.785) scaleY(.8) translateX(7em) translateY(-4.5em);
    -o-transform:skewX(-45deg) rotate(15deg) scaleX(1.785) scaleY(.8) translateX(7em) translateY(-4.5em);
    transform:skewX(-45deg) rotate(15deg) scaleX(1.785) scaleY(.8) translateX(7em) translateY(-4.5em);
  margin-top: 300px;
  }
.map-grid-cell-content {
  transform: skewX(45deg) rotate(0deg);
}
<div class='map-container'>
  <div class='map-grid'>

    <div class="map-grid-cell-content">
       dwdwaddawwa
    </div>

  </div>
</div>

Does this meet your requirements?

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

Adjust the text input width appropriately for the cloze exercise

My JavaScript-generated fill-in-the-blank text is causing me trouble when it comes to adjusting the size of the input boxes. Unlike others, I know exactly what the user will or should be entering. If there is a blank space like this _______________, I wa ...

htmlcsstextbox

The screen-responsive navigation bar is experiencing functionality issues

I am facing an issue with my navigation bar on both desktop and mobile. When I maximize the window while the mobile navbar is open, it disappears as expected but the desktop navbar does not appear. I am using a bootstrap template and I am unsure if solving ...

javascripthtmlcss

Ensure that when a user clicks back on an image popup, the page stays in its current position

Is there a way to ensure that after closing a popup image, the browser returns to the same position where it was before? Currently, when I close the popup image, the page scrolls back to the top (as indicated by the red square in the example). However, I ...

htmlcss

Tips for effectively utilizing CSS classes with current-device

Attempting to lock the screen orientation in portrait mode for mobile and iPad devices using a CSS snippet found on css-tricks.com. @media screen and (min-width: 320px) and (max-width: 767px) and (orientation: landscape) { html { transform: rotate ...

javascripthtmlcssscreen-orientation

When moving the cursor rapidly between divs, they begin to shake and jitter

The html snippet I'm working with includes: <div class="project"> <h3 class="black product">Dash</h3> <a href="#" class="black hide">view project</a> </div> <div class="project"> <h3 class="bla ...

htmlcss

display complete map using full height in a bootstrap 4 row

Struggling to get the map in this column to fill the entire height within a Bootstrap4 column. After attempting to add h-100 to the row, scroll bars appeared at the bottom of the map and the bottom 10% of the page went missing. https://i.sstatic.net/epfx ...

htmlcssbootstrap-4

Achieving an oval shape using HTML5 and CSS3: Step-by-step guide

<!DOCTYPE html> <head> <title> Oval shape</title> </head> <body> <div style="width:400px; height:400px; background-color:#ff0;">Oval</div> <p> Exploring the creation of an oval shape using HTML5 ...

htmlcsscss-shapes

JQuery Mobile header style vanishing when applied to a page generated dynamically

My second page retrieves data from an Ajax call on the home page, but the header lacks JQuery styling and I suspect a connection between the two. Here is the HTML for the dynamically generated page: <div data-role="page" id="breakdownDialog" data-add-b ...

cssjquery-mobilemobiledynamically-generated

The HTML image link is adorned with a tiny blue checkmark underneath

My a tag with an image inside seems to be extending below the image, resulting in a small blue tic mark on the bottom right side. I've attempted different CSS solutions such as setting border to none, but nothing has resolved the issue. Any assistance ...

htmlcss

`Erase content from a field once text is typed into a different field`

I have a Currency Converter with two input fields and a button. I enter the amount to be converted in the first field, and the result of the conversion appears in the second field. My question is: How can I automatically clear the second field when I type ...

javascriptc#htmljquerycss

Problem with CSS animations in IE10

I've encountered a problem with a specific section of a website I created. This section functions perfectly on all browsers and older versions of Internet Explorer, but not on the latest versions. It seems that IE no longer supports [IF] statements in ...

htmlcssanimationfadeinternet-explorer-11

CSS: The sub-class functionality is not functioning as intended

Having trouble with this HTML element : <span class="item-menu-notif non-lue" onclick="dosomething(2150)"> TEXT </span> These are the CSS classes : .item-menu-notif{ display: block; cursor: pointer; padding: 0 0.4em 0 0.4em; } s ...

htmlcss

Adaptive web layout (Adjusting design based on screen size)

I'm feeling a bit confused about responsive web design. I understand that I can use media queries to apply different stylesheets based on specific screen sizes. For example, a screen at 600px will use one stylesheet while a larger screen will use a co ...

jqueryhtmlcssresponsive-design

What is the best way to eliminate the gap between two columns of square containers?

ref image How can I create equal spacing between two columns of blocks? Please help me with the following code: <div class="row"> <div class="col-md-6"> <img src="./img/02.jpg&qu ...

htmlcssbootstrap-5

What is the process of including a CSS class in a NAV anchor tag on WordPress?

I recently started using Bootstrap 4 and have structured my menu in the following way: <ul class="navbar-nav mx-auto justify-content-center"> <li class="nav-item"> <a class="nav-link" href="index.php">HOME</a> </ ...

phpcsswordpressbootstrap-4

Adjusting the height of flex items to 100%

I'm currently diving into the world of flexbox by exploring various tutorials. Here's an example I created without utilizing Flex. Instead, I relied on float:left. Check out the example: https://jsfiddle.net/arhj8wxg/4/ I attempted to convert t ...

htmlcssflexbox

``Look at that cool feature - a stationary header and footer that stay in place

I'm seeking advice on how to design a website with a fixed header and footer that remain consistent across all pages, with only the content area altering. I've come across a site as an example - , but couldn't figure out how it was done even ...

javascriptjquerycssajax

The element cannot be clicked at this point as another element would intercept the click:

Having an issue with clicking a button at the top of the page. The CSS selector works fine in my local Eclipse environment, but when trying to run it on Jenkins server on my local machine, it fails with an error stating that the element is not clickable. T ...

javacssseleniumjenkinscucumber

Tips for displaying a message in the model body when a bootstrap model does not have any data in jQuery

Having trouble displaying a text message in the Bootstrap modal body when there is no data available in the model. I have multiple cards in the model, and if I click on the skip or done buttons, each card will close. However, if there is only one card in t ...

javascripthtmljquerycssbootstrap-4

Define the width and height of images specifically for screens with a maximum device width using @media queries

Having some trouble with the sizing of images on mobile devices. Using the code below, but for some reason, the height remains at 13em on smartphones, despite setting it differently for other devices. Any ideas why this might be happening? @media only sc ...

htmlcssimagelayoutheight