css旋转90度_css旋转图片

编程小号 • 2024-06-05 16:46 • 未分类

文章目录

一、CSS3 2D 转换 – rotate 旋转

CSS3 2D 转换 – rotate 旋转指的是令标签元素在二维坐标系中 , 顺时针 / 逆时针旋转指定的度数 ;

rotate 旋转语法 :

	transform: rotate(90deg);

旋转度数 : 旋转度数的单位是 deg , 表示度 ;
旋转方向 : 度数为整数为顺时针旋转 , 度数为负数为逆时针旋转 ;
旋转中心 : 默认的旋转中心点为标签元素的中心点 ;

二、代码示例

1、未旋转状态

代码示例 :

<!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; margin: 100px; } </style>
</head>

<body>
    <div>
        顺时针旋转 45 度
    </div>
</body>

</html>

显示效果 :

2、旋转示例 – transition 过度效果设置

代码示例 :

<!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; /* 顺时针旋转 45 度 */ transform: rotate(45deg); background-color: pink; margin: 100px; /* 将过渡效果写到元素本身上 为动画元素添加 */ transition: all 1s; } div:hover { 
      /* 鼠标移动到 div 元素上方时 旋转到 90 度 */ transform: rotate(90deg); } </style>
</head>

<body>
    <div>
        顺时针旋转 45 度
    </div>
</body>

</html>

执行结果 :

默认效果 :
鼠标指针移动到元素上方后的效果 :

今天的文章css旋转90度_css旋转图片分享到此就结束了，感谢您的阅读。

版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容，请发送邮件至举报，一经查实，本站将立刻删除。
如需转载请保留出处：https://bianchenghao.cn/81907.html