css元素转换(旋转函数、rotateX 和 rotateY 的使用、移动函数、缩放函数、过渡、动画)详解

最新推荐文章于 2024-07-16 04:29:45 发布
最新推荐文章于 2024-07-16 04:29:45 发布
阅读量1.2w 收藏 19
点赞数 8
分类专栏： HTML和CSS外加JavaScript自学历程 文章标签： css javascript css3
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/Argonaut_/article/details/128557786
版权

文章目录

旋转函数

  • 在 CSS3 中，使用 rotate 函数能够让指定的元素对象绕原点旋转，主要在二维空间内进行操作。
    在这里插入图片描述
  • 其语法格式如下所示：
transform: rotate(角度); /*元素按照指定角度旋转*/
  • 这里的角度可以是正值也可以是负值。正负值意味着什么呢？🤔
  • 正负值意味着不同的旋转方向，规定参数为正时，顺时针旋转；参数为负时，逆时针旋转。
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <style>
      div {
        width: 50px;
        height: 50px;
        margin: 20px;
        display: inline-block;
        background-color: chartreuse;
      }
      /*向右旋转 60 度*/
      .c1 {
        background-color: #ffe6e6;
        transform: rotate(60deg);
      }
      /*向左旋转 60 度*/
      .c2 {
        background-color: #a7c5eb;
        transform: rotate(-60deg);
      }
    </style>
  </head>
  <body>
    <div class="c1"></div>
    <div></div>
    <div class="c2"></div>
  </body>
</html>

在这里插入图片描述

rotateX 和 rotateY 的使用

  • 除了使用 rotate 函数绕原点来旋转指定元素外，我们还可以围绕指定轴来旋转元素。
  • rotateX 函数可以让指定元素围绕横坐标（X 轴）旋转。其使用格式如下所示：
transform: rotateX(角度);
  • rotateY 函数可以让指定元素围绕纵坐标（Y 轴）旋转。其使用格式如下所示：
transform: rotateY(角度);

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <style>
      .c1 {
        transform: rotateX(70deg);
      }
      .c2 {
        transform: rotateX(180deg);
      }
      .c3 {
        transform: rotateY(45deg);
      }
      .c4 {
        transform: rotateY(180deg);
      }
    </style>
  </head>
  <body>
    <div>
      <img
        src="https://labfile.oss.aliyuncs.com/courses/3773/icons8-animal-64.png"
      />
      <img
        src="https://labfile.oss.aliyuncs.com/courses/3773/icons8-animal-64.png"
        class="c1"
      />
      <img
        src="https://labfile.oss.aliyuncs.com/courses/3773/icons8-animal-64.png"
        class="c2"
      />
    </div>
    <div>
      <img
        src="https://labfile.oss.aliyuncs.com/courses/3773/icons8-animal-85.png"
      />
      <img
        src="https://labfile.oss.aliyuncs.com/courses/3773/icons8-animal-85.png"
        class="c3"
      />
      <img
        src="https://labfile.oss.aliyuncs.com/courses/3773/icons8-animal-85.png"
        class="c4"
      />
    </div>
  </body>
</html>

在这里插入图片描述

移动函数

  • translate() 函数能够重新定位元素坐标，该函数包含两个参数值，分别用来定位 X 轴和 Y 轴的新坐标。其语法格式为：
transform: translate(移动值); /*元素按照指定值沿着 X 轴和 Y 轴移动*/
transform: translateX(移动值); /*元素按照指定值沿着 X 轴移动*/
transform: translateY(移动值); /*元素按照指定值沿着 Y 轴移动*/

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <style>
      div {
        width: 50px;
        height: 50px;
      }
      /*沿 X 轴向右移动 20 个像素*/
      .c1 {
        background-color: #51adcf;
        transform: translateX(20px);
      }
      /*沿 Y 轴向下移动 30 个像素*/
      .c2 {
        background-color: #ffe5b9;
        transform: translateY(30px);
      }
    </style>
  </head>
  <body>
    <div class="c1"></div>
    <div class="c2"></div>
  </body>
</html>

在这里插入图片描述

页面上有两个 div 元素块，使用 transform: translateX(20px) 让第一个元素块向 X 轴移动 20 个像素；使用 transform: translateY(30px) 让第二个元素块向 Y 轴移动 30 个像素。

缩放函数

  • scale() 函数能够缩放元素大小，该函数包含两个参数，分别用来定义宽和高的缩放比例。其语法格式为：
transform: scale(缩放值); /*元素按照指定值沿着 X 轴和 Y 轴缩放*/
transform: scaleX(缩放值); /*元素按照指定值沿着 X 轴缩放*/
transform: scaleY(缩放值); /*元素按照指定值沿着 Y 轴缩放*/

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <style>
      div {
        width: 50px;
        height: 50px;
        margin: 30px;
      }
      .c1 {
        background-color: rgba(179, 153, 38, 0.651);
      }
      /*沿着 X 和 Y 轴进行缩放*/
      .c2 {
        background-color: #9088d4;
        transform: scale(2);
      }
      /*沿着 X 轴进行缩放*/
      .c3 {
        background-color: #ffe5b9;
        transform: scaleX(2);
      }
      /*沿着 Y 轴进行缩放*/
      .c4 {
        background-color: #1c8181;
        transform: scaleY(2);
      }
    </style>
  </head>
  <body>
    <div class="c1"></div>
    <div class="c2"></div>
    <div class="c3"></div>
    <div class="c4"></div>
  </body>
</html>

在这里插入图片描述

  • 在页面上有四个 div 元素块，第一个是宽和高均为 50 个像素的正方形元素块，我们另外三个元素块在此基础上进行缩放。
  • 第二个元素块使用 transform: scale(2) 让元素同时沿着 X 轴和 Y 轴扩大 2 倍。
  • 第三个元素块使用 transform: scaleX(2) 让元素沿着 X 轴扩大 2 倍。
  • 第四个元素块使用 transform: scaleY(2) 让元素沿着 Y 轴扩大 2 倍。

过渡

  • CSS3 过渡是元素从一种样式逐渐过渡到另一种样式。 其语法如下所示：
transition: 指定属性 持续时间 速度曲线 开始时间;
  • 它是一个复合属性，我们也可以如下分开使用这几个属性。
transition-property: 属性值; /*指定属性名*/
transition-duration: 属性值; /*完成过渡这一过程的时间*/
transition-timing-function: 属性值; /*速度曲线*/
transition-delay: 属性值; /*过渡的开始时间*/

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <style>
      div {
        margin-top: 40px;
        margin-left: 40px;
        width: 50px;
        height: 50px;
        background-color: #51adcf;
        /*ease-in-out 慢速开始慢速结束*/
        transition: transform 1s ease-in-out;
      }
      div:nth-child(2) {
        transform: rotate(-60deg);
      }
      div:hover {
        transform: scale(2);
      }
    </style>
  </head>
  <body>
    <div></div>
    <div></div>
  </body>
</html>

在这里插入图片描述
代码说明如下：

  • 在 div:hover 中，使用 transform: scale(2) 设置当鼠标放在 div 元素上时，元素会放大 1 倍。
  • 在 div:nth-child(2) 中，使用 div:nth-child(2) 设置第二个元素逆时针旋转 60deg。
  • 使用 transition 属性实现过渡的效果，其中 ease-in-out 是 transition-timing-function
    属性的属性值。

接下来给大家介绍一下 transition-timing-function 属性的取值吧！

transition-timing-function 属性

  • transition-timing-function 属性用来设置过渡效果从开始到结束的时间曲线，它有很多可用属性值，常用属性值如下表所示。
    在这里插入图片描述
  • transition-timing-function 属性有这么多的属性值，我们用 steps 来练习一下吧～ 🤪
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <style>
      div {
        width: 50px;
        height: 50px;
        margin: 50px;
        background-color: cornflowerblue;
        transition: transform 4s steps(4);
      }
      div:hover {
        transform: scale(2);
      }
    </style>
  </head>
  <body>
    <div></div>
  </body>
</html>

在上面代码中，用 steps 的方式将 div 元素分成四步，使元素的面积逐渐变成原来的 2 倍，当鼠标从元素上移开，又会以四步的形式将元素还原成原有的大小。

动画

  • @keyframes 被称为关键帧，它能够设置一些元素的样式，让该元素可以从原来的样式渐渐过渡到新的样式中。其语法格式如下所示：
@keyframes 动画名
{
    0% {样式属性：属性值;}
    25% {样式属性：属性值;}
    50% {样式属性：属性值;}
    100% {样式属性：属性值;}
}
  • 这里的百分比是用来规定动画发生变化的时间的，0% 代表动画的开始，100% 代表动画的结束，中间的可以自定义。
  • 将 @keyframes 创建的动画绑定到选择器上，通过 animation 属性就能实现动画效果了，其语法格式为：
animation: 动画名 完成动画的周期 是否重复;
  • animation 属性是一个复合属性，它的子属性如下所示。

在这里插入图片描述

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <style>
      .circle {
        width: 60px;
        height: 60px;
        border-radius: 100%;
        background-color: #ffd8a6;
        animation-name: action;
        animation-duration: 9s;
        animation-iteration-count: 10;
      }
      @keyframes action {
        0% {
          margin-left: 400px;
        }
        25% {
          background-color: #dd7631;
        }
        50% {
          border-radius: 10%;
        }
        100% {
          margin: 100px;
        }
      }
    </style>
  </head>
  <body>
    <div class="circle"></div>
  </body>
</html>
Argonaut_
关注
  • 8
    点赞
  • 踩
  • 19
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
3D-calculator:这是一个使用Vanilla Javascript和CSS动画的3D函数计算器的个人项目。
05-26
在Web开发中，实现3D效果通常涉及CSS3的`transform`属性，特别是`rotateX`, `rotateY`, `rotateZ`用于实现三维旋转，以及`perspective`来创建透视效果。开发者可能还使用了`translate3d`来进行三维平移。通过这些CSS...
CSS 中的 rotate
zyhTobacco的博客
07-16 1万+
在 CSS 坐标系中，从左到右为 X 轴正方向，从上到下为 Y 轴正方向，从屏幕里到屏幕外为 Z 轴正方向。 <div class='translateOut'> <div class='translate2d'></div> </div> <style> .translateOut{ width: 500px; height: 500px;border: 3px solid orange; } .
Css属性transform详解（变形、旋转、缩放）
宝子的博客
05-17 2109
1.变形就是指通过css来改变元素的形状或位置 2.变形不会影响到页面的布局(不会脱离文档流) 3.平移元素，百分比是相对于自身计算的1.通过旋转可以使用元素沿着x y 或 z旋转指定的角度(transform)
CSS【详解】变换 transform（含位移 translate，缩放/翻转 scale，旋转 rotate，CSS 的角度单位，斜切skew，透视 perspective，变换类型和原点等）...
最新发布
weixin_42011700的博客
07-16 217
变换是缩放、位移、旋转、透视、斜切等的总称。仅适用于块级元素可以一次应用多次变换，但顺序不同，效果可能不同transform 和裁剪相关样式（如 clip，clip-path）同时存在时，会先裁剪，再变换。如果父元素设置了 transform 变换，则子元素的固定定位 position:fixed 效果就会失效，样式表现就...
CSS基础学习——动画
qq_41890177的博客
08-26 1万+
一、CSS3 2D变形（利用Transfrom方法） 1、rotate（angle） 元素顺时针旋转给定的角度。允许负值，元素将逆时针旋转。 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <style> div{ width: 100px
你还不知道css的旋转效果怎么实现？来这里看看吧
Wod_7的博客
05-22 1万+
删除 重试 复制 旋转效果是CSS中最基础而且最常用的效果之一。它在设计中拥有着广泛的应用，可以用于改变图标、旋转图片、达到复杂的动画效果等等。在这篇文章中，我们将深入讨论如何在CSS中实现旋转效果，从旋转图标到3D旋转，让我们开始吧！
transform三大属性之rotate（旋转）
热门推荐
weixin_44167504的博客
09-05 4万+
transform三大属性之rotate
CSS3中rotate的作用
qq_42526440的博客
08-15 7314
一。CSS3中的transform（旋转）允许您翻转，旋转，缩放和倾斜元素。 transform(旋转)是一种让元素更改形状，大小和位置的效果。 CSS3支持2D和3D转换。 例子： w3cschool transition可以有以下值： ease-动画开始缓慢，然后加速（此为default默认值） ease-in:缓步开始，然后加速，突然停止。 ease-out：快...
CSS如何实现旋转：深入理解与实用技巧
01101
01-14 1585
在Web开发中，CSS（层叠样式表）是一种强大的工具，它不仅能够控制网页的布局和样式，还能实现各种视觉效果，包括元素的旋转。本文将深入探讨如何使用CSS实现旋转效果，并提供一些实用的技巧和示例。
Web前端基础：CSS3过渡&转换.pptx
05-06
CSS3的转换功能允许元素在不改变布局的情况下进行2D或3D空间中的变换，如移动、旋转、缩放和倾斜。转换可以通过以下函数实现： 1. **2D转换**： - `translate(x, y)`：沿X轴和Y轴移动元素。 - `rotate(angle)`：...
利用HTML5+CSS3实现3D转换效果实例详解
09-24
为了实现3D效果，我们需要使用`transform`属性，并配合`rotateX()`, `rotateY()`, 和 `rotateZ()`等方法进行旋转。例如，`rotateY(45deg)`会使元素绕Y轴旋转45度。然而，仅靠这些旋转无法呈现出真正的3D效果，因为...
CSS3网状地球旋转特效
06-24
**CSS3网状地球旋转特效详解** 在网页设计中，动态元素往往能吸引用户的注意力，增强网站的互动性。"CSS3网状地球旋转特效"就是一种利用CSS3技术实现的创新视觉效果，它通过线条构成的网状结构，模拟出地球的形态，...
jQuery和CSS3 3D旋转项目展示模板特效特效代码
03-20
在本模板中，主要应用了`rotateX`和`rotateY`两个函数，实现了围绕X轴和Y轴的3D旋转，使得项目在切换时仿佛是在立方体的六个面上翻转。 ```css .transform { transform-style: preserve-3d; } ``` 这里的`...
3D动画旋转rotateY的用法（23）
weixin_45147894的博客
06-27 1721
CSS3转换属性（Transform）
qq_45799465的博客
01-26 3778
变形属性：transform transform翻译成汉语具有"变换"或者"改变"的意思。 通过此属性具有非常强大的功能，比如可以实现元素的位移、拉伸或者旋转等效果 最能体现transform 属性强大实力的是实现元素的3D变换效果 变形属性：transform的所有属性值 transform：none; 默认值 transform：translate（）； 移动 平移 单位是px transform：rotate（）； 旋转 单位是deg deg度数 ...
CSS3转换属性—transform之translate、rotate、scale函数详解
青春木鱼的博客
11-14 1万+
Transform属性应用于元素的2D或3D转换。这个属性允许你将元素旋转，缩放，移动，倾斜、透视等。其中，skew(倾斜)，perspective（透视）不常使用。transform是css3新增的属性，在IE9及以下的浏览器会出现兼容问题，所以要慎用！
CSS-transform/rotate
王子老师
11-06 1884
念一场雪，念一段过往，四季轮回，沉淀安然，愿有衣暖身，有人暖心。 主要知识点： 1、transform-style: preserve-3d;立体效果开启 2、transition: all 1s;动画过渡 3、transform: rotateY(180deg);3d旋转 4、子绝父相 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>.
旋转任意角度 如何让div旋转一定的角度 (转)
weixin_30463341的博客
12-10 686
<html lang="en"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <title>DIV旋转属性的演示</title> <meta http-equiv="X-UA-Compatible"...
html中坐标轴旋转角度,CSS3 旋转rotate()rotatex()rotatey()应用实例
weixin_29190651的博客
06-03 6218
CSS3中，对象转换有多种方式，其中一种为旋转rotate()，主要是围绕X轴或Y轴旋转，所以rotate()又要细分为rotatex()和rotatey()，前者用于设置对象围绕X轴旋转，后者用于设置对象围绕Y轴旋转。rotate既可控制对象作2D旋转，又可控制对象作3D旋转，本篇先介绍作2D旋转的语法规则和应用实例，后续篇章再介绍作3D旋转的情况。下面先看rotatex()、rotatey()...
获取transform的rotateY角度的正则函数
07-15
要获取 `transform` 属性中的 `rotateY` 角度，你可以使用正则表达式来提取这个值。 以下是一个示例代码，演示如何使用正则表达式来获取 `transform` 属性中的 `rotateY` 角度： ```javascript function getRotateY(element) { var transformValue = $(element).css('transform'); var rotateYRegex = /rotateY\(([-\d.]+)deg\)/; var matches = rotateYRegex.exec(transformValue); if (matches && matches[1]) { return parseFloat(matches[1]); } else { return null; } } var rotateY = getRotateY('#your-element'); console.log(rotateY); ``` 在上述代码中，我们定义了一个名为 `getRotateY` 的函数，它接受一个参数 `element`，表示要获取 `rotateY` 角度的元素。 在函数内部，我们首先使用 `$()` 函数来选取指定的元素，并使用 `css()` 方法获取元素的 `transform` 属性值。 然后，我们定义了一个正则表达式 `rotateYRegex`，用于匹配 `rotateY` 角度的值。该正则表达式假设角度值是以度数（deg）为单位。 接下来，我们使用 `exec()` 方法在 `transformValue` 中执行正则表达式匹配，并将结果存储在 `matches` 变量中。 最后，我们检查 `matches` 是否存在，并且取出数组中索引为 1 的值（即角度值），将其转换为浮点数并返回。 在示例代码的最后，我们调用 `getRotateY` 函数，并传入要获取 `rotateY` 角度的元素的选择器。然后，将结果打印到控制台。 请注意，将 `#your-element` 替换为你想要获取 `rotateY` 角度的元素的选择器。 希望这个回答对你有所帮助。如果还有其他问题，请随时提问。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值