CSS学习17--CSS3 过渡、2D变形、3D变形、动画

最新推荐文章于 2024-09-10 22:58:41 发布
最新推荐文章于 2024-09-10 22:58:41 发布
阅读量720 收藏 15
点赞数 10
分类专栏： css学习 文章标签： css css3 学习
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_54641174/article/details/142106715
版权

CSS3 过渡、2D变形、3D变形、动画

一、过渡

为元素从一种样式变为另一种样式时添加效果。

transition: 过渡属性 花费时间 运动曲线 何时开始;
前两个值不可省略，运动曲线默认ease，合适开始默认0s立即开始可以省略。

注意：transition需要写在div里而不是hover里；多个属性设置不同时，用逗号隔开；需要描述所有属性变化时，过渡属性值为all。

<html>
	<head>
		<style>
			div {
				width: 200px;
				height: 200px;
				background-color: pink;
				transition: width 0.2s ease 0s,height 0.3s ease-in 1s;
				/* transition: all 0.6s ease 0s; */
			}
			div:hover {
				width: 300px;
				height: 300px;
			}
		</style>
	</head>
	<body>
	<div></div>
</html>

二、2D变形 transform

做元素的变形、位移、缩放，可以和transition结合使用。

1.移动 translate

用translate平移

transform: translate(x,y)

<html>
	<head>
		<style>
			div {
				width: 200px;
				height: 200px;
				background-color: pink;
				transition: all 0.5s;
			}
			div:active { /*鼠标点击没有松开鼠标，相当于点击*/
				transform: translate(100px,200px);
				transform: translate(50%,100%);
			}
		</style>
	</head>
	<body>
	<div></div>
</html>

注意：

  • 只移动一个坐标可以把另一个坐标设为0；

  • 也可以写成：translateX（只跟一个参数）；translateY（只跟一个参数）。

  • translate移动的距离如果是%，则以自己的宽度为准，而不是父亲为准。

    <html>
	<head>
		<style>
			div {
				width: 200px;
				height: 200px;
				background-color: pink;
				position: absolute; /*盒子居中对齐*/
				left: 50%; /*以父级宽度为准*/
				margin-left: -100px; /*需要计算*/
				top: 50%;
				transform: translate(-50%,-50%);
			}
		</style>
	</head>
	<body>
	<div></div>
</html>

2.缩放 scale

transform: scale(x,y)
x和y的值小于1为缩小倍数，大于1为放大倍数。

<html>
	<head>
		<style>
			div {
				width: 200px;
				height: 200px;
				background-color: pink;
			}
			div:hover {
				transform: scale(1.2,1.5);
			}
		</style>
	</head>
	<body>
	<div></div>
</html>

注意：

  • 如果只写一个参数，宽高都缩放！

  • 谁做动画，谁加过渡！

    <html>
	<head>
		<style>
			div {
				width: 100px;
				height: 50px;
				background-color: pink;
				overflow: hidden;
			}
			div img {
				transition: all 0.3s;
			}
			div:hover img {
				transform: scale(1.2,1.5);
			}
		</style>
	</head>
	<body>
	<div>
		<img src="images/search.png" alt="">
	</div>
</html>

3. 旋转 rotate

transform: rotate(*deg)
正值是顺时针，负值是逆时针；比如90deg是顺时针旋转90度

<html>
	<head>
		<style>
			div {
				width: 100px;
				height: 50px;
				background-color: pink;
				overflow: hidden;
			}
			div img {
				transition: all 0.3s;
			}
			div:hover img {
				transform: rotate(90deg);
			}
		</style>
	</head>
	<body>
	<div>
		<img src="images/search.png" alt="">
	</div>
</html>

旋转中心点的设置：

	<html>
		<head>
			<style>
				div img {
					padding: 200px;
					transition: all 0.3s;
					transform-origin: bottom top;
				}
				div:hover img {
					transform: rotate(90deg);
				}
			</style>
		</head>
		<body>
		<div>
			<img src="images/search.png" alt="">
		</div>
	</html>

4. 倾斜 skew

transform: skew(x,y);

<html>
	<head>
		<style>
			div {
				font-size: 50px;
				font-weight: 700;
				transition: all 0.2s;
			}
			div:hover {
				transform: skew(20deg,0);
			}
		</style>
	</head>
	<body>
	<div>
		123
	</div>
</html>

三、3D变形

3D多了z轴，遵循左手法则。
在这里插入图片描述
在这里插入图片描述

1. rotateX（）rotateY（） rotateZ（）

<html>
	<head>
		<style>
			div img {
				transition: all 0.2s;
			}
			div:hover img {
				transform: rotateX(180deg);
			}
		</style>
	</head>
	<body>
	<div>
		<img src="images/course.png" alt="">
	</div>
</html>

2. 体会透视 perspective

  • 透视原理：近大远小。
  • 浏览器透视：把近大远小的所有图像，透视在屏幕上。
  • perspective：视距，表示视点距离屏幕的长短。视点，用于模拟透视效果时人眼的位置

注：并非任何情况下需要透视效果，根据开发需要进行设置。
perspective一般作为一个属性，设置给父元素，作用于所有3D转换的子元素

<html>
	<head>
		<style>
			div {
				perspective: 1000px;
			}
			div img {
				transition: all 0.2s;
			}
			div:hover img {
				transform: rotateX(180deg);
			}
		</style>
	</head>
	<body>
	<div>
		<img src="images/course.png" alt="">
	</div>
</html>

3. translateX（） translateY（） translateZ（）

Z轴是物体到屏幕的距离，透视是一种展示形式。

<html>
	<head>
		<style>
			div {
				margin: 200px;
				perspective: 1000px;
			}
			div img {
				transition: all 0.2s;
			}
			div:hover img {
				transform: translateZ(100px);
			}
		</style>
	</head>
	<body>
	<div>
		<img src="images/course.png" alt="">
	</div>
</html>

transform: translate3d(x,y,z);
z轴只能是px单位。

<html>
	<head>
		<style>
			div {
				margin: 200px;
				perspective: 1000px;
			}
			div img {
				transition: all 0.2s;
			}
			div:hover img {
				transform: translate3d(100px,100px,100px);
			}
		</style>
	</head>
	<body>
	<div>
		<img src="images/course.png" alt="">
	</div>
</html>

4. 开门大吉例子

<html>
	<head>
		<style>
			div {
				width: 200px;
				height: 180px;
				margin: 200px;
				background: url(images/course.png);
				perspective: 1000px;
				position: relative;
			}
			span {
				display: block;
				width: 100px;
				height: 180px;
				background-color: pink;
				border: 1px solid black;
				transition: all 0.2s;
			}
			span.door-l {
				position: absolute;
				top: 0;
				left: 0;
				transform-origin: left;
			}
			span.door-r {
				position: absolute;
				top: 0;
				right: 0;
				transform-origin: right;
			}
			div:hover .door-l   {
				transform: rotateY(-130deg);
			}
			div:hover .door-r  {
				transform: rotateY(130deg);
			}
		</style>
	</head>
	<body>
	<div>
		<span class="door-l"></span>
		<span class="door-r"></span>
	</div>
</html>

在这里插入图片描述

5. backface-visibility

用于设置图片不正向对着屏幕时是否可见。
可以用来写翻转图片，先translateY（180deg），当backface-visibility：hidden可以实现翻转时显示背面图片。

四、动画

animation: 动画名称 动画时间 运动曲线 何时开始 播放次数 是否反方向；

动画名称是自定义的

<html>
	<head>
		<style>
			div {
				width: 200px;
				height: 180px;
				margin: 200px;
				background: url(images/course.png);
				/*animation: name duration timing-function delay iteration-count direction fill-mode;*/
				animation: go 2s ease 0s 2 reverse;
			}
			@keyframes go { /*定义动画*/
				from{
					transform: translate(0);
				}
				to{
					transform: translate(600px);
				}
			}
		</style>
	</head>
	<body>
	<div>
	</div>
</html>

例子：无缝滚动

<html>
	<head>
		<style>
			* {
				margin: 0;
				padding: 0;
			}
			ul {
				list-style: none;
			}
			nav {
				width: 1200px;
				height: 20px;
			}
			nav li {
				float: left;
			}
			nav ul {
				width: 200%; /*两倍！！！*/
				animation: moving 2s linear infinite;
			}
			div {
				width: 200px;
				height: 20px;
			}
			@keyframes moving { /*定义动画*/
				from{
					transform: translate(0);
				}
				to{
					transform: translate(-1000px);
				}
			}
			nav:hover ul { /*鼠标经过nav，里面的ul不做动画*/
				animation-play-state: paused ;
			}
		</style>
	</head>
	<body>
	<nav>
		<ul>
			<li><div style="background-color: red;"></div></li>
			<li><div style="background-color: orange;"></div></li>
			<li><div style="background-color: yellow;"></div></li>
			<li><div style="background-color: green;"></div></li>
			<li><div style="background-color: blue;"></div></li>
			<li><div style="background-color: purple;"></div></li>
			<li><div style="background-color: red;"></div></li>
			<li><div style="background-color: orange;"></div></li>
			<li><div style="background-color: yellow;"></div></li>
			<li><div style="background-color: green;"></div></li>
			<li><div style="background-color: blue;"></div></li>
			<li><div style="background-color: purple;"></div></li>
		</ul>
	</nav>
</html>
乌鸦不像写字台
关注
  • 10
    点赞
  • 踩
  • 15
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
html5+css3实现2D-3D动画效果实例
weixin_43513126的博客
02-29 2045
html5+css3实现2D-3D动画效果实例 主要实现的功能就是一些2D、3D的动画效果，如平移、缩放、旋转等等。 文章目录html5+css3实现2D-3D动画效果实例2D变换3D变换2D中应用实现案例3D中应用实现案例css3动画 2D变换 是在一个平面对元素进行的操作。 可以对元素进行水平或者垂直位移、旋转或者拉伸. *2d对下面面坐标系简单分析如下： （1）.默认状态下，x轴是水平的，...
css3中新增的变形动画属性,css3中的变形（transform）、过渡（transition）、动画（animation）属性讲解...
weixin_31598511的博客
08-03 2341
css3中制作动画的几个属性：css3中的变形(transform)、过渡(transition)、动画(animation)。一、 CSS3变形(transform)语法：transform ： none | [ ]*也就是：transform: rotate | scale | skew | translate |matrix;1.1、旋转rotate()rotate() :通过指定的角度...
CSS3 2D变形 3D变形 过渡 动画
xiangxiongfly
07-21 3154
在CSS3中，动画效果包括4个部分：变形（transform）、3D变形、过渡（transition）、动画（animation）。
CSS3动画（过渡、2D变形、3D变形）
技术无止境，人生仍探索。
05-04 3227
1.过渡transition 1)说明： 作用在进行变化的元素上，有四个属性值：property(目标属性),duration(过渡时长), curve(运动曲线),delay(开始时间) 创建一个空div，为它设置样式： div{ width:100px; height:100px; background-color:lightblue; margin:200px a...
CSS3-2D变换与3D变换、过渡与动画讲解
six6de6的博客
07-22 347
css动画轻松搞定
03-CSS3中2D和3D的使用
weixin_55702682的博客
05-30 1049
那么transformZ的值越接近200，就是离的越近，看上去也就越大，超过200就看不到了，因为相当于跑到后脑勺去了，我相信你正常情况下，是看不到自己的后脑勺的。transform是CSS3中具有颠覆性的特征之一，可以实现元素的位移、旋转、倾斜、缩放，甚至支持矩阵方式，配合过渡和即将学习的动画知识，可以取代大量之前只能靠Flash才可以实现的效果。[注意]其中，x和y可以是长度值，也可以是百分比，百分比是相对于其本身元素水平方向的宽度和垂直方向的高度和；可以对元素进行水平和垂直方向的缩放。
CSS3文字变形3D阴影效果.zip
07-04
CSS3（层叠样式表第三版）是Web开发领域的一个强大工具，它提供了丰富的样式控制，包括动画、过渡、变换以及全新的选择器。在这个案例中，我们将重点关注CSS3的`transform`和`box-shadow`属性，它们是实现3D文字和...
利用CSS3制作动画(变形、过渡、动画)
Learn to value time
01-09 1565
CSS3变形 变形介绍 CSS3变形是一些效果的集合，如平移、旋转、缩放、倾斜效果 每个效果都可以称为变形（transform），它们可以分别操控元素发生平移、旋转、缩放、倾斜等变化。 CSS3变形是通过tranform实现的，可以用在块元素和行内元素上，该属性可以旋转、缩放、移动元素。 transform:[transform-function] *; 设置变形函数，可以是一个，也可以是多个，中间以空格分开。 变形函数 translate() 平移函数，基于X、Y坐标重新定位元素的位置
CSS——变形、过渡、动画
YANGMENGZHENG的博客
10-27 578
目录 前言 一、变形（transform） 1、2D变换 （1）、translate() 方法 （2）、rotate() 方法 （3）、scale() 方法 （4）、skew() 方法 （5）、matrix() 方法 2、3D变换 （1）、translate3d()位移 （2）、translateZ() （3）、rotate3d()旋转 （4）、scale3d()缩放 （5）、matrix3d()矩阵 3、CSS3中实现变形的优点 二、过渡（transition） 1、..
CSS —— 界面布局
m0_73557953的博客
09-10 475
采用flex布局的元素，称为 Flex 容器（flex container），简称"容器"
css的选择器有哪些？权重由大到小是怎么排序的？
BANaanaa的博客
09-10 421
ID 选择器 ():类选择器 ():属性选择器 (, ):伪类选择器 (, ):元素选择器 ():伪元素选择器 (, ):通配符选择器 ():组合选择器（如 , ）的权重是其组成部分的权重之和。例如， 的权重为 100 + 10 = 110。
HTML/CSS/JS学习笔记 Day4（HTML--C3 表格）
给bug两拳的博客
09-10 1057
C3 表格：3.1 表格标签（语法 / 相关属性 / 表格结构）、3.2 列表标签（无序列表⭐ / 有序列表 / 自定义列表⭐）
css之雪碧图（精灵图）
qq_55961367的博客
09-02 758
雪碧图（Sprite）是一种在Web开发中常用的图像合并技术，将多个小图标或图片合并成一张大图，然后通过CSS来显示其不同部分。这种技术可以减少HTTP请求数量，提高网页加载速度。如果一张大图由许多小图构成，那么每张小图都需要进行网络请求，这样一来就会有很多请求，为了减少网络请求，雪碧图就出现了。听到雪碧图是不是跟我一样，啥？以下是本人自己写的例子，大图的图片是在百度找的。
CSS“多列布局”（补充）——WEB开发系列35
一条晒干的咸鱼的博客
09-10 433
多列布局是一种非常常见的布局方式，适用于内容丰富的页面，如新闻网站、杂志或博客。
CSS基本语法结构
nice66660的博客
09-10 928
*某某[属性|=属性值] 选择到有a标签,且有属性title,且属性值只有1个是link的或者属性值有多个但是得是link-开头的变 *//*某某[属性~=属性值] 选择到的是a标签且有class属性,且属性值有完整的itme词的变 *//*某某[属性=属性值] 选择到有某某标签有指定属性且属性值必须一模一样的，多一个空格都不行 *//*某某[属性^=属性值] a标签有class属性且属性值是li开头的 *//*某某[属性$=属性值] a标签有class属性且属性值结尾是t的变 */
css鼠标移动过去变成手的图标
qq_38880880的博客
09-10 78
【代码】css鼠标移动过去变成手的图标。
如何利用 CSS 渐变实现多样化背景效果
最新发布
weixin_63625059的博客
09-10 330
总在平常看到像这样的图片 背景是如何实现的呢 背景效果的多样性和美观性直接影响用户体验。CSS 渐变为设计师提供了一种强大且灵活的方法来创建引人注目的背景。渐变是颜色之间平滑过渡的效果，通过调整渐变类型和设置，你可以轻松实现从简单到复杂的各种背景效果。在日常开发中 有很多需要用到渐变的地方，这片文章来总结一下来看MDN是如何说的CSS 渐变由 [] 数据类型表示，它是 [] 的一种特殊类型，由两种或多种颜色之间的渐变过渡构成。
前端：HTML、CSS、JS、Vue
云扬的博客
09-04 3901
本文主要介绍了HTML、CSS、JavaScript、Vue的基本语法和使用。供个人学习使用
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值