CSS 空间转换 动画

最新推荐文章于 2024-07-30 16:49:30 发布
最新推荐文章于 2024-07-30 16:49:30 发布
阅读量402 收藏 11
点赞数 5
文章标签： css css3 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_67140973/article/details/139348687
版权

目录

正文开始

1. 空间转换

空间：是从坐标轴角度定义的 X、Y 和 Z 三条坐标轴构成了一个立体空间，Z 轴正方向是垂直页面向外的方向。空间转换又叫 3D转换。

属性：

<style>
	transform: translate3d(x,y,z);
	transform: translateX();
	transform: translateY();
	transform: translateZ();
</style>

取值：

  • 像素单位数值
  • 百分比（以盒子自身尺寸为参照）

例如：

<!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: 100px;
		height: 100px;
		background-color: pink;
        margin: 100px auto;
        transition: all 0.5s;
    }
    div:hover {
        transform: translate3d(100px,200px,200px);
    }
    </style>
</head>
<body>
    <div></div>
</body>
</html>

需要注意的是，默认情况下，Z 轴上的变化是无法生效的，因为屏幕是二维的，并不能显示 Z 轴的效果，观察 Z 轴变化的通过设置视距的方式来实现

1.1 视距 - perspective

作用：指定了观察者与 Z=0 平面的距离，为元素添加近大远小的透视效果。

属性：添加给直接父级，取值范围800-1200效果最佳

perspective: 视距;

例如：

<!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>
        .father {
            perspective: 1000px;
        }
        .son {
            width: 100px;
            height: 100px;
            background-color: pink;
            margin: 100px auto;
            transition: all 0.5s;
        }
        .son:hover {
            transform: translateZ(200px);
        }
    </style>
</head>
<body>
    <div class="father">
        <div class="son"></div>    
    </div>
</body>
</html>

1.2 空间转换 - 旋转

作用：设置对象以指定坐标轴为轴旋转，配合视距属性可使空间转换更为真实

属性：

<style>
	/* 绕 Z 轴转 */
	transform: rotateZ(转动角度);
	/* 绕 X 轴转 */
	transform: rotateX(转动角度);
	/* 绕 Y 轴转 */
	transform: rotateY(转动角度);
	/* 自定义旋转轴位置 */
	transform: rotate3d(x,y,z,角度度数)
</style>

transform:rotate3d(x,y,z,角度度数):

  • x,y,z 取值为0-1之间的数字
  • 根据 x,y,z 的值会自动生成一个新的旋转轴，指定盒子会绕着这个轴旋转指定角度

左手法则：用以根据旋转方向确定取值正负。
-左手握住旋转轴，拇指指向正值方向，其他四个手指弯曲方向为旋转正值方向：
在这里插入图片描述
例如：

<!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>
        .father {
            perspective: 1000px;
            width: 500px;
            margin: 100px auto;
        }
        img {
            width: 500px;
            transition: all 0.5s;
        }
        .father img {
            transform: rotateX(45deg);
        }
    </style>
</head>
<body>
    <div class="father">
        <img src="img.jpg" alt=" ">    
    </div>
</body>
</html>

页面效果：
在这里插入图片描述

1.3 立体呈现 - transform-style

作用：设置元素的子元素是位于 3D 空间中还是平面中。

属性：

<style>
	/* 子集处于平面中 */
	transform-style:flat;
	/* 子集处于 3D 空间 */
	transform-style:preserve-3d;
</style>

呈现立体图形步骤：

  1. 父级元素添加 transform-style:preserve-3d;
  2. 子集定位，使所有子集都在盒子内部
  3. 调整子盒子的位置
    请添加图片描述
    例如：

<!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>
        .box {
            /* 给父级盒子添加 3D 属性 */
            margin: 100px auto;
            width: 200px;
            position: relative;
            transform-style: preserve-3d;
            transition: all .5s;
            perspective: 1000px;
        }
        .box div {
            /* 子集定位 */
            position: absolute;
            top: 0;
            left: 0;
            width: 200px;
            height: 200px;
        }
        .back {
            transform: translateZ(-100px);
            background-color: red;
        }
        .front {
            transform: translateZ(100px);
            background-color: green;
        }
        .box:hover {
            transform: rotateY(60deg);
        }
    </style>
</head>
<body>
    <div class="box">
        <div class="back">后面</div>
        <div class="front">前面</div>
    </div>
</body>
</html>

页面效果：
请添加图片描述
静态的图片很难展示出动态的效果，所以大家可以试着自己运行一下来看看动画效果。

需要注意的是，当盒子在空间中转换的时候，他的坐标轴也会随之改变。

1.4 空间转换 - 缩放

作用：在空间中缩放指定对象。

属性：

<style>
	transform: scale3d(x,y,z);
	transform: scaleX();
	transform: scaleY();
	transform: scaleZ();
</style>

属性值：

  • 属性值为具体数值，即缩放倍数，小于1缩小，大于1放大。

2. 动画 - animation

  • 过渡：实现两个状态间的变化过程
  • 动画：实现多个状态间的变化过程，动画过程可控（重复播放、最终画面、是否暂停）

2.1 动画的基本用法

动画实现步骤：

  1. 定义动画：有两种写法
<style>
	/* 只有初始和末尾状态 */
	@keyframes 动画名称1 {
		from {状态1}
		to {状态2}
	}
	/* 将整个动画过程分为若干部分 */
	/* 百分比表示占动画时长的百分比 */
	@keyframes 动画名称2 {
		0% {状态1}
		10% {状态2}
		.....
		100% {状态10}
	}
</style>
  1. 使用动画
<style>
	animation: 动画名称 动画花费时长(s);
</style>

例如：

<!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>
        .div1 {
            width: 100px;
            height: 100px;
            background-color: pink;
            animation: change1 1s;
        }
        .div2 {
            width: 100px;
            height: 100px;
            background-color: green;
            animation: change2 1s;
        }
        @keyframes change1 {
            from{
                width: 100px;
            }
            to{
                width: 300px;
            }
        }
        @keyframes change2 {
            0% {
                width: 100px;
            }
            30% {
                width: 300px;
            }
            50% {
                width: 500px;
            }
            100% {
                width: 200px;
            }
        }
    </style>
</head>
<body>
    <div class="div1"></div>
    <div class="div2"></div>
</body>
</html>

动画效果不便展示，请大家自行运行浏览

2.1 animation 复合属性

使用动画的属性值不止上面两种，具体为：

<style>
	animation: 动画名称 动画时长 速度曲线 延迟时间 重复次数 动画方向 执行完毕时状态;
</style>
  • 动画名称和动画时长必须要写
  • 属性值不分先后顺序
  • 如果有两个时间值，第一个时间表示动画时长，第二个时间表示延迟时间

速度曲线取值：

  • linear：匀速
  • steps(x)：x为数字，表示把动画分为x步完成。工作中可配合精灵图实现精灵图动画

重复次数取值：

  • 数字：表示重复次数
  • infinite：表示无限循环

动画方向取值：

  • alternate：反向动画

执行完毕时状态取值：

  • forwards：完毕时状态为动画最后状态
  • backwards：默认值，完毕时状态为初始状态

例如：

<!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: 100px;
            height: 100px;
            background-color: green;
            animation: change 1s linear 2s infinite alternate;
        }
        @keyframes change {
            0% {
                width: 100px;
            }
            30% {
                width: 300px;
            }
            50% {
                width: 500px;
            }
            100% {
                width: 200px;
            }
        }
    </style>
</head>
<body>
    <div></div>
</body>
</html>

动画效果不便展示，请大家自行运行浏览

2.2 animation 拆分属性

属性作用取值
animation-name动画名称动画名称
animation-duration动画时长时长(s)
animation-delay延迟时间时长(s)
animation-fill-mode动画执行完毕时状态forwaeds（最后一帧状态）；backwards（第一帧状态）
animation-timing-function速度曲线steps()：逐帧动画
animation-iteration-count重复次数infinite（无限循环）
animation-direction动画执行方向alternate（反向）
animation-play-state暂停动画paused（暂停），通常配合 :hover 使用

例如：

<!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: 100px;
            height: 100px;
            background-color: green;
            animation-name: change;
            animation-duration: 1s;
            animation-iteration-count: infinite;
            animation-delay: 1s;
            animation-timing-function: linear;
        }
        div:hover {
            animation-play-state: paused;
        }
        @keyframes change {
            0% {
                width: 100px;
            }
            30% {
                width: 300px;
            }
            50% {
                width: 500px;
            }
            100% {
                width: 200px;
            }
        }
    </style>
</head>
<body>
    <div></div>
</body>
</html>

动画效果不便展示，请大家自行运行浏览

2.3 多组动画

作用：设置一个标签使用多个动画

属性：

<style>
	animation:
		动画1,
		动画2,
		...
		动画N
	;
</style>

例如：

<!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: 100px;
            height: 100px;
            background-color: green;
            /* 使用多个动画 */
            animation: 
                change 1s linear infinite,
                move 3s
            ;
        }
        div:hover {
            animation-play-state: paused;
        }
        @keyframes move {
            from {
                transform: translate(0,0);
            }
            to {
                transform: translate(100px,0);
            }
        }
        @keyframes change {
            0% {
                width: 100px;
            }
            100% {
                width: 200px;
            }
        }
    </style>
</head>
<body>
    <div></div>
</body>
</html>

动画效果不便展示，请大家自行运行浏览

注：若动画初始状态与盒子默认样式相同，那么初始状态可以省略。

完

wwangxu
关注
  • 5
    点赞
  • 踩
  • 11
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
CSS之空间转换以及动画
c_perfectworld的博客
10-28 189
空间转换 目标：使用transform属性实现元素在空间内的位移、旋转、缩放等效果 1、空间：是从坐标轴角度定义的。x、y和z三条坐标轴构成了一个立体空间，z轴位置与视线方向相同。 2、空间转换也叫3D转换 属性：transform 空间位移 目标：使用translate实现元素空间位移效果 语法： transform：translate3d(x,y,z); transform：translateX(值) transform：translateY(值) transform：transl
空间转换和动画
qq_48666786的博客
09-06 975
使用transform属性实现元素在空间内的位移、旋转、缩放等效果1.空间：是从坐标轴角度定义的。x 、y 和z三条坐标轴构成了一个立体空间，z轴位置与视线方向相同。2.空间转换也叫3D转换3.属性：transform。
CSS——空间转换 和 动画
qq_48613863的博客
04-07 584
一、空间转换 空间：x、y、z三个坐标轴，z轴和用户的视线在一条直线上，z轴的正轴指向用户自己；空间转换也叫3D转换；（不是网页开发重点、因为目前设计师追求简洁风，空间转换用得少） 属性：transform 1、空间位移： transform: translate3d(x, y, z); transform: translateX(值); transform: translateY(值); transform: translateZ(值); 取值（正负均可）：像素单位数值；百分比。 只
【CSS3】 平面转换 空间转换 动画
叶子与海的博客
10-02 870
CSS3中动画效果包括3个部分：过渡（transition）、变形（transform）、动画（animation)。前面学习的CSS过渡（transition）呈现的是一个“过程”，而CSS变形（transform）呈现的仅仅是一个“结果”。 使用transform属性来实现元素的变形效果，变形分为平面转换和空间转换。 语法：
HTML transform空间转换 CSS animation动画
weixin_40746230的博客
07-01 266
HTML transform空间转换 CSS animation动画
CSS动画 3D反转Tab
01-29
CSS3中的3D转换提供了在三维空间中操作元素的能力，增强了视觉效果。主要有以下几种变换： 1. `transform: translate3d(x, y, z)`: 平移元素在X、Y、Z轴上的位置。 2. `transform: rotateX(angle)`: 以X轴为轴心...
css 3 动画实实现点赞动画
08-29
在CSS 3中，动画是通过一系列的关键帧来创建动态效果的，这使得网页元素能够以平滑的方式从一种状态转换到另一种状态。在“css 3 动画实实现点赞动画”中，我们主要利用了`@keyframes`规则和`transform`属性来创建一...
CSS3加载动画网站Loading特效
06-24
**CSS3的转换（Transforms）**允许元素在二维或三维空间内改变其形状、大小和位置，无需改变文档流。在加载动画中，常见的应用包括旋转（rotate）、缩放（scale）、移动（translate）和倾斜（skew）。例如，一个简单...
CSS3动画下载按钮特效
07-28
2. **转换（Transform）**：允许元素进行二维或三维空间的变形，如旋转、缩放、平移等。在下载按钮动画中，可能使用了`transform`属性来实现按钮按下时的形状变化。 3. **过渡（Transition）**：用于指定元素从一种...
3D效果CSS柱状图动画特效
06-24
总结来说，"3D效果CSS柱状图动画特效"是利用CSS3的3D转换、动画属性和盒阴影等特性，配合HTML和可能的JavaScript实现的一种动态数据展示方法。它不仅增强了数据可视化的吸引力，还展示了CSS3的强大功能。如果你想在...
CSS实现图片边框酷炫效果
流绪@微梦
07-26 1301
我们在浏览一些网页时，经常会看到一些好看酷炫的元素边框效果（如下图），那么这些效果是怎么实现的呢？我们知道，一般的边框，要么是实线，要么是虚线（点状，短横线），但是遇到一些特殊的边框，传统边框就束手无策了。遇到这种边框，不妨考虑下用 border-image。border-image属性可以给边框添加背景图片，实现图片边框效果。在css中，可以使用border-image属性设置图片边框，只需要给元素添加border-image样式即可。
[css3] 如何设置边框颜色渐变
qq_14993591的博客
07-22 851
【代码】[css3] 如何设置边框颜色渐变。
CSS3 scale 适配
m0_54007573的博客
07-24 513
CSS3 scale 适配
【分享】前端程序员-技术网站推荐
一位前行者的博客
07-30 440
对于前端开发人员来说，以下是一些推荐的技术网站，这些网站提供了丰富的资源和知识，可以帮助你提升前端开发技能：收集一些 、、 的网站 vite 官方中文文档 element-plus 官方中文文档 pinia 官方中文文档 vue-router 官方中文文档 Tailwind CSS 官方文档 vitest 官方中文文档 es6 中文文档 axios 官方中文文档 vxetable 官方中文文档 lodash 中文文档 echarts 官方中文文档 animat
js、ts、argular、nodejs学习心得
最新发布
07-30 222
工作中需要前端argular开发桌面程序，后端用nodejs开发服务器，商用软件架构。
苍穹外卖浏览器前端界面修改
程序员象漂亮的博客
07-25 281
客户原始方案是期望做一个Spring Boot + Vue的饿了么系统，但时间上太仓促，所以建议选择开源的苍穹外码目作为作业提交。客户接受了建议的方案后，期望对前端页面提出了一些个性化的定制修改。
基于上云api前端开发经验教训(loading...)
IIIIIAN
07-26 453
对于上云api开发学习过程中的错误教训积累总结
electron 主进程和渲染进程
qq_21087199的博客
07-29 287
虽然最近一年前端大环境不好，但是大家还是要加油鸭！，努力总不会错，千军万马过独木桥，希望大家都是闯过去那一个。进入正题。
我们的前端开发逆天了！1 小时搞定了新网站，还跟我说 “不要钱”
努力做最接地气的编程干货分享，感谢关注
07-29 1317
本文将带你了解一个新的 Web 框架 **Astro**，并手把手带你使用 Astro 搭建一个属于自己的站点，用过的都说真香！
移动Web空间转换与动画技巧详解
移动Web空间转换与动画是现代网页设计中不可或缺的组成部分，尤其在响应式设计和提升用户体验方面具有重要意义。本篇文章将深入探讨这两个关键知识点。 首先，空间转换，也被称为三维转换，是通过CSS `transform` ...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值