1. Demand Analysis

Given a box model,

insert image description here
After the mouse is moved up, a new box model layout appears by means of rotation,

insert image description here

After rotating up, the new layout will cover the previous box model;
insert image description here

The realization principle is as follows:

When drawing, two box models are drawn in advance,

One is an empty box model, in the empty box model, a child box is drawn,

Child boxes are box models with actual elements;

insert image description here

For the sub-box model with actual content, the initial state is rotated 90 degrees clockwise along the lower left corner as the center point;

If the parent container has set

            /* 隐藏边界之外的元素 
               旋转前的伪类 div::before 元素需要先隐藏 */
            overflow: hidden;

Style, the content beyond the border of the parent container will be automatically hidden, as shown in the following figure:

insert image description here

2. Code example

The actual box model content is div::beforeadded through the pseudo-element;

div::beforeThe pseudo-element is an inline element that cannot be set in size, and needs to be set as an inline block element to set the width and height;

            /* before 元素是行内元素 无法设置大小 
               将其设置为行内块元素 才能设置宽高 */
            display: block;

Set rotation-related properties for the actual content: rotation center point, default initial angle, animation duration of rotation;

            /* 设置以左下角为中心旋转 */
            transform-origin: left bottom;
            /* 绕 左下角 旋转 180 度 */
            transform: rotate(90deg);
            /* 设置过渡动画 */
            transition: all 1s;

Code example:

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>CSS3 2D 转换 - rotate 旋转</title>
    <style>
        div {
      
      
            width: 200px;
            height: 200px;
            /* 上下 100 像素外边距, 居中对齐 */
            margin: 100px auto;
            /* 设置 1 像素边框 */
            border: 1px solid pink;
            /* 隐藏边界之外的元素 
               旋转前的伪类 div::before 元素需要先隐藏 */
            /* overflow: hidden; */
        }
        
        div::before {
      
      
            content: "2D旋转";
            /* before 元素是行内元素 无法设置大小 
               将其设置为行内块元素 才能设置宽高 */
            display: block;
            width: 100%;
            height: 100%;
            /* 设置背景颜色 */
            background-color: cyan;
            /* 设置以左下角为中心旋转 */
            transform-origin: left bottom;
            /* 绕 左下角 旋转 180 度 */
            transform: rotate(90deg);
            /* 设置过渡动画 */
            transition: all 1s;
        }
        /* 设置 鼠标 移动到 div::before 伪元素 上的效果 */
        
        div:hover::before {
      
      
            /* 鼠标移动上去后  */
            transform: rotate(0deg);
        }
    </style>
</head>

<body>
    <div>
    </div>
</body>

</html>

3. Operation effect

The initial state is:

insert image description here
The style when the mouse moves over the box model and rotates to half:

insert image description here

Style after rotation:

insert image description here

【CSS3】CSS3 2D conversion-rotate ④ (rotation case)

Article directory

1. Demand Analysis

2. Code example

3. Operation effect

Guess you like