利用2D旋转rotate设置

liying999

已于 2022-05-23 20:54:45 修改

阅读量110

点赞数

文章标签： javascript

于 2022-05-23 20:07:31 首次发布

本文链接：https://blog.csdn.net/liying999/article/details/124933894

版权

本文详细介绍了如何使用JavaScript进行2D旋转操作，通过rotate函数改变元素的视觉方向，适用于网页动态效果和交互设计。

摘要由CSDN通过智能技术生成

<!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>利用2D旋转rotate设置</title>
    <style>
        div {
            overflow:hidden;
            width: 200px;
            height: 200px;
            border: 1px solid rgba(252, 12, 12, 0.895);
            margin: 10px;
            float: left;
        } 
 
        div::before {
            content: "好景常在";
            display: block;
            width: 100%;
            height: 100%;
            background-color: rgb(255, 0, 0);
            transform: rotate(180deg);
            transform-origin: left bottom;
            transition:  all .25s;
        }
 
        div:hover::before {
            transform: rot