Spinning a container and then elongating it subsequently

I am experimenting with rotating a div on hover and then extending its right side with a slanted angle. So far, I have successfully extended the div on hover.

div{
   height: 200px;
    width: 200px;
    background-color:wheat;
    transition: .2s;
    margin-top: 1em;
    margin-left: 10em;
    margin-bottom: 10em;
    overflow: hidden;
}

div:after{
 -webkit-transition: .2s;
  transition: .2s;
  content: '';
  position: absolute;
  top: 0;
  left: 25%;
  width: 0px;
  height: 200px;
  background: wheat;
  overflow: hidden;
  -webkit-transform-origin: 100% 0;
          transform-origin: 100% 0;
  -webkit-transform: skew(-35deg);
          transform: skew(-35deg);
  z-index: -1;
  margin-left: 10em;
  margin-top: 1em;
  }

div:hover:after {
  -webkit-transition: .2s;
  transition: .2s;
  width: 200px;
  height: 200px;
  background: wheat;
  -webkit-transform-origin: 100% 0;
          transform-origin: 100% 0;
  -webkit-transform: skew(-35deg);
          transform: skew(-35deg);
  z-index: -1;
   margin-top: 1em;
    margin-left: 10em;
    margin-bottom: 10em;
  }
<div>
   <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Similique dicta adipisci qui fugit, eum eaque dolorem accusamus natus animi nam, deleniti tempora fugiat iusto minima optio commodi laudantium veritatis quos.</p>
</div>

However, when attempting to rotate the main div using transform: rotate(-45deg);, the following pseudo element does not function as expected. Are there any solutions for this issue, or perhaps a JavaScript alternative that could simplify the process?

javascriptjquerycss

Answer №1

It seems like you're looking for something along these lines:

.box{
   height: 200px;
    width: 200px;
    background-color:wheat;
    transition: .2s;
    margin-top: 10em;
    margin-left: 10em;
    margin-bottom: 10em;
}

.box:hover {
  transform: rotate(-45deg);
}

.box:after{
 -webkit-transition: .2s;
  transition: .2s;
  content: '';
  position: absolute;
  top: 0;
  left: 65%;
  width: 0px;
  height: 200px;
  background: wheat;
  overflow: hidden;
  -webkit-transform-origin: 100% 0;
          transform-origin: 100% 0;
  -webkit-transform: skew(-35deg);
          transform: skew(-35deg);
  z-index: -1;
  }

.box:hover:after {
  -webkit-transition: .2s;
  transition: .2s;
  width: 200px;
  height: 200px;
  background: wheat;
  -webkit-transform-origin: 100% 0;
          transform-origin: 100% 0;
  -webkit-transform: skew(-35deg);
          transform: skew(-35deg);
  z-index: -1;
    margin-left: 4em;
  }
  
  p {
    margin: 0;
  }
<div class="box">
  <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Similique dicta adipisci qui fugit, eum eaque dolorem accusamus natus animi nam, deleniti tempora fugiat iusto minima optio commodi laudantium veritatis quos.</p>
</div>

Answer №2

div{
   height: 200px;
    width: 200px;
    transition: .2s;
    margin-top: 1em;
    margin-left: 10em;
    margin-bottom: 10em;
    position: relative;
}

div:before{
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 200px;
  height: 200px;
  background: wheat;
  z-index: -1;
  transition: all 1s ease;
  }

div:hover:before {
  width: 200px;
  height: 200px;
  -webkit-transform: rotate(180deg) ;
          transform: rotate(180deg);
          transition: all 1s ease;
 
  }
  
  div::after {
  position: absolute;
  top: 0;
  right: 0;
  content: "";
 width: 0;
      height: 0;
      border-top: 200px solid wheat;
      border-right: 200px solid transparent;
  z-index: -2;
  opacity: 0;
  transition: all 300ms ease;
  }
  @keyframes example {
  from {Opacity: 0;right: 0}
  to {opacity: 1;right: -200px;}
}
  div:hover::after {
  animation-delay: 1s;
  animation: example forwards;
  animation-duration: 1s;
  transition: all 300ms ease;
  }
<div>
   <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Similique dicta adipisci qui fugit, eum eaque dolorem accusamus natus animi nam, deleniti tempora fugiat iusto minima optio commodi laudantium veritatis quos.</p>
</div>

I modified the before and after CSS, and incorporated animations as well.

Answer №3

It appears that the issue was caused by the presence of overflow:hidden on the div element. However, it is quite perplexing to me why the pseudo element remained visible even without any rotation applied.

div {
  height: 200px;
  width: 200px;
  background-color: wheat;
  transition: .2s;
  margin-top: 1em;
  margin-left: 10em;
  margin-bottom: 10em;
  position: relative;
}

div:hover {
  transform: rotate(-60deg);
}

div:after {
  transition: .2s;
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: wheat;
  transform-origin: 100% 0;
  transform: skew(-0deg);
  z-index: -1;
}

div:hover:after {
  transform: skew(-35deg);
}
<div>
  <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Similique dicta adipisci qui fugit, eum eaque dolorem accusamus natus animi nam, deleniti tempora fugiat iusto minima optio commodi laudantium veritatis quos.</p>
</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

Switch the variable width font to a fixed width font

My asp.net dropdown list control is set up with item names and prices like this: Pen | 2.09 Book | 1.2 Handbag | 30.50 Pencil | 1.05 The alignment of the items in the dropdown is perfect when using font-family: "Courier New" , Courier, monosp ...

jqueryhtmlcssdrop-down-menu

Adjust the background shade of a div according to the color attribute retrieved from a JSON data source

Looking at this snippet, I'm tasked with changing the color of the "header" div to match the color provided in the JSON data. The code snippet is as follows: $("#dropdown").change(function() { $("#header").css("background-color", $(this).val()); }).c ...

javascriptjqueryjson

Ensure that bulleted lists and numbered lists are aligned to the left side

Check out this website where the ordered and unordered lists are not aligned correctly. The ideal alignment would have the bullets (or numbers) left aligned. For instance, the number "1." should be aligned to the left on the same line as the heading "Per ...

css

Remove a specific div element using the keyword "this" in Javascript

Is there a way to generate a new div by pressing a button, with an option to delete that specific div by clicking on another button within it? I want each new div created by the first button to have its own unique delete button that will only remove its ...

javascripthtmlthis

"Utilizing jQuery AJAX to submit form data without using image coordinates fetched from PHP

I am trying to capture the coordinates of a click on an image within a form using PHP: <form method="post" action="" id="update"> <input type="image" src="picture.jpg"> </form> Using print_r($_POST), I can see that I receive $_POST[& ...

phpjqueryajaxforms

The only information returned from calling mongoose's Model.save() method are the fields { _id, __

I've encountered a problem even though I believe I'm following all the right steps. I'm attempting to save an item from a form into my mongodb collection using mongoose. This is what my schema looks like: // stationmodel.js export const Sta ...

javascriptnode.jsmongodbexpressmongoose

Using a loop in JavaScript to validate credit card information by cycling through the form field names and identifying any errors

Embarking on a challenge for a course. Required to perform credit card validation according to these specific guidelines: You are establishing your own credit card company. You have devised a new method to validate credit cards using a straightforward fun ...

javascript

Exclusive Chrome Bug Found in Form Tag

My webpage functions flawlessly on IE 7, 8, and 9, Firefox, Safari, and Opera. However, when I view it on Chrome, the positioning of the DIV containing the form is not always correct. If I remove the form tag, the issue goes away. There are no floats, only ...

htmlcssformsgoogle-chromeposition

Resolve the potential jQuery conflict between Lightbox2 and FancyBox

Hey there, I recently took over a project for a website . However, no matter what type of lightbox I try to implement, I can't seem to get them to display properly. I suspect it's due to a jQuery conflict issue, but my skills in jQuery are quite ...

jquerywordpressfancybox

Adjust the initial slider according to the values displayed in the following four sliders

Having an issue updating the slider value in the first one based on selected values from four other sliders. The selected value should not exceed 50, which is the maximum value in the first slider. Link to Working Fiddle : Below is the HTML code : & ...

javascriptjqueryhtmlcss

Looking to showcase socket io object values on the client side - here's how!

Hey there, I am looking to store userID, userName, and socketId in an array called users using objects. Here is how I plan to do it: var userInfo = new Object(); userInfo.userName = user.userName; userInfo.userId = user.userId; userInfo.socketId = socket. ...

javascriptnode.jssocket.io

In what situations is it beneficial to utilize inherited scope, and when is it best to avoid it

Is it better to use inherited scope (i.e scope:true) when creating a directive, or is it more appropriate not to use it (i.e scope:false)? I grasp the distinction between scope types and their respective functionalities. However, I am uncertain about whic ...

javascriptangularjs

Imitate the actions of images with {width: 100%; height : auto} properties

I am interested in creating a unique layout that consists of a stripe composed of images with varying widths and heights. These images need to be proportional, scaled at the same height, and collectively have a width equal to the parent element. However, ...

htmlcss

How about this as a unique rewrite: "Adjust the height of the toggleable div to automatically fill

Hey there! I'm in the process of creating a movie review website on WordPress, and while I can handle PHP pretty well, my skills with jQuery and JavaScript are a bit lacking. I'm hoping some of you can lend a hand. This is actually the first ques ...

phpjquerytoggle

A guide on effectively testing the value of Object.constructor using Jasmine and minimizing redundancy in the it statements for AngularJS

In my AngularJS application, I have defined an object model like this: .factory('Watermark', function () { // Constructor, with a class name // Assumption: the backend provides us with a topic or not! function Watermark(content, tit ...

javascriptangularjsunit-testingjasmine

The markers within a loop in react-native-maps are failing to render

Recently, I've been delving into the world of React Native app development for iOS. Specifically, I've been experimenting with the react-native-maps package. Here's the issue I'm facing: When I statically render a single MapView.Marker, ...

javascriptiosreactjsreact-nativemaps

How can I transform this to an ES6 module in JavaScript?

Currently, I am dissecting the ShaderGlow example found on this GitHub link in order to integrate it into my node application. The original author utilized <script> tags within the HTML document, while my entire application is structured within app. ...

javascriptmodulethree.jsshader

The appearance of SVG markers varies depending on the screen they are viewed on

Latest Update: I have finally figured out the screen issue. The device pixel ratio is to blame. Icons appear smaller on devices with lower window.devicePixelRatio. One solution I found is to adjust the icon size based on window.devicePixelRatio, like this ...

javascriptgoogle-mapsreactjsgoogle-maps-api-3

Enhancing Contentful rich text by removing CSS class when adding a new option

I am integrating contentful into my Next.js project I am facing an issue with the contentful rich text feature where adding a new option causes the CSS class from the first option to be removed and only applies to the second option. I'm perplexed as ...

javascriptreactjsnext.jscontentful

Fetching basic information from an API using Ember.js

I am facing an issue with my Ember.js page where I am trying to retrieve data from a REST API. The API is provided by apiary.io and it returns a simple set of data as shown below: {"semantics": [ {key : "11111", name : "Block 1"}, {key : "22222", name ...

javascriptember.jsember-data