CSS3高级用法——2D转换、动画、3D转换学习笔记

最新推荐文章于 2023-05-04 00:00:22 发布
最新推荐文章于 2023-05-04 00:00:22 发布
阅读量277 收藏 1
点赞数
分类专栏： 学习笔记 文章标签： css3 css 3d
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/qq_46153157/article/details/129299735
版权
该文详细介绍了CSS3中的转换特性，包括2D转换如translate的位移、rotate的旋转以及scale的缩放，还讲解了转换中心点transform-origin的设置。此外，文中还涉及到了CSS3动画的创建与应用，如定义关键帧@keyframes和使用不同动画属性。最后，文章探讨了3D转换，包括translate3d、perspective和rotate3d等，以及如何实现3D翻转效果。

摘要生成于 C知道 ，由 DeepSeek-R1 满血版支持， 前往体验 >

CSS3转换

转换：元素的位移、旋转、缩放

6.1 2D转换

  • 移动translate

语法：

在这里插入图片描述

特点：不会影响其他的盒子

小技巧：实现盒子的水平居中、垂直居中——定位+转换

.fa {
  position: relative;
  width: 400px;
  height: 400px;
  background-color: antiquewhite;
}
.son {
  position: absolute;
  width: 200px;
  height: 200px;
  background-color: aquamarine;
  top: 50%;
  left: 50%;
  /*往上、往左走本身的一半*/
  transform: translate(-50%, -50%);
}
  • 旋转rotate

语法：

在这里插入图片描述

img {
  width: 200px;
  height: 200px;
  transform: rotate(0deg);
  border-radius: 50%;
  border: 5px solid #FFEAB2;
  /* 过渡效果 */
  transition: all 1s;
}
img:hover {
  transform: rotate(360deg);
}

小技巧：实现三角

在这里插入图片描述

div {
  position: relative;
  width: 150px;
  height: 30px;
  border: 1px solid #000;
}
div::after {
  content: '';
  top: 5px;
  right: 15px;
  position: absolute;
  width: 15px;
  height: 15px;
  border-right: 1px solid #000;
  border-bottom: 1px solid #000;
  transform: rotate(45deg);
  transition: all 1s;
}
div:hover::after {
  /*实现上下翻转*/
  transform: rotate(225deg);
}
  • 转换中心点transform- origin

语法：

在这里插入图片描述

练习：
在这里插入图片描述

div {
  overflow: hidden;
  position: relative;
  width: 150px;
  height: 150px;
  border: 2px solid #FBBC03;
  margin: 100px auto;
}
div::before {
  top: 0;
  left: 0;
  position: absolute;
  content: 'TNT';
  width: 150px;
  height: 150px;
  background-color: #FBBC03;
  transform: rotate(180deg);
  transform-origin: left bottom;
  transition: all 7s;
}
div:hover::before {
  transform: rotate(0deg);
}
  • 缩放scale

语法：

在这里插入图片描述

注意：里面的x,y是指的倍数，大于1是放大，小于1是缩小

特点：不影响其他盒子

练习1:图片的缩放

在这里插入图片描述

div {
  overflow: hidden;
  width: 200px;
  height: 200px;
  margin: 100px auto;
}
div a img {
  transition: all .6s;
}
div a img:hover {
  transform: scale(1.2);
}

2D转换的综合写法：

transform*: translate(100px, 100px) rotate(45deg) scale(1.1);

位移一定写在最前面！！

6.2动画

动画：

第一步：定义动画

第二步：调用动画

定义动画：

在这里插入图片描述

0%是动画的开始，100%是动画的结束，可以替换为from和to

调用动画：

在这里插入图片描述

基本使用：

@keyframes yidong {
  0% {
    transform: translate(0px);
  }

  100% {
    transform: translate(500px, 0);
  }
}
div {
  width: 200px;
  height: 200px;
  background-color: antiquewhite;
  animation-name: yidong;
  animation-duration: 2s;
}

动画序列：

@keyframes yidong {
  0% {
    transform: translate(0px);
  }
  25% {
    transform: translate(500px, 0);
  }
  50% {
    transform: translate(500px, 300px);
  }
  75% {
    transform: translate(0, 300px);
  }
  100% {
    transform: translate(0, 0);
  }
}

动画的常用属性：

在这里插入图片描述

简写：
在这里插入图片描述

练习：热点图
在这里插入图片描述

body {
  background-color: #333;
}
.map {
  position: relative;
  width: 747px;
  height: 616px;
  background: url(media/map.png) no-repeat;
  margin: 0 auto;
}
.city {
  position: absolute;
  top: 227px;
  right: 193px;
  color: #fff;
}
.dotted {
  width: 8px;
  height: 8px;
  background-color: #09f;
  border-radius: 50%;
}
.city div[class^="pulse"] {
  /* 保证我们小波纹在父盒子里面水平垂直居中 放大之后就会中心向四周发散 */
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 8px;
  height: 8px;
  box-shadow: 0 0 12px #009dfd;
  border-radius: 50%;
  animation: pulse 1.2s linear infinite;
}
.city div.pulse2 {
  animation-delay: 0.4s;
}
.city div.pulse3 {
  animation-delay: 0.8s;
}
@keyframes pulse {
  0% {}
  70% {
    /* transform: scale(5);  我们不要用scale 因为他会让 阴影变大*/
    width: 40px;
    height: 40px;
    opacity: 1;
  }
  100% {
    width: 70px;
    height: 70px;
    opacity: 0;
  }
}

animation-timing-function：动画的速度曲线

在这里插入图片描述

奔跑的熊大：

body {
  width: 100%;
  height: 336px;
  position: absolute;
  background: url(media/bg1.png) no-repeat;
  animation: leftmove 20s linear infinite forwards;
}
div {
  position: absolute;
  z-index: 3;
  top: 200px;
  width: 200px;
  height: 100px;
  background: url(media/bear.png) no-repeat;
  animation: bear 2.5s steps(8) infinite, move 7s forwards;
}
@keyframes bear {
  0% {
    background-position: 0 0;
  }

  100% {
    background-position: -1600px 0;
  }
}
@keyframes move {
  0% {
    left: 0;
  }
  100% {
    left: 50%;
    transform: translate(-50%);
  }
}
@keyframes leftmove {
  0% {
    background-position: 0 0;
  }
  100% {
    background-position: 100% 0;
  }
}

在这里插入图片描述

6.3 3D转换

三维坐标系：

在这里插入图片描述

  • 3D移动translate3d
   transform: translate3d(x,y,z);
  • 透视perspective

要加在父盒子上

  • 3D旋转rotate3d

遵循左手准则：

在这里插入图片描述

/* transform: rotateY(-45deg); */
/* 延x轴旋转 */
/* transform: rotate3d(1, 0, 0, 45deg); */
/* 延对角线旋转 */
transform: rotate3d(1, 1, 0, 45deg);
  • 3D呈现transfrom-style

控制子盒子是否开启三维立体环境

transform-style: preserve-3d;//开启3d环境

在这里插入图片描述

body {
  perspective: 500px;
}
.box {
  position: relative;
  width: 200px;
  height: 200px;
  margin: 100px auto;
  transform-style: preserve-3d;
  transition: all .5s;
}
.box:hover {
  transform: rotateY(-45deg);
}
.box div {
  position: absolute;
  width: 100%;
  height: 100%;
  background-color: aquamarine;
}
.box div:last-child {
  background-color: bisque;
  transform: rotateX(60deg);
}

练习：两个盒子翻转

在这里插入图片描述

body {
  perspective: 400px;
}
.box {
  position: relative;
  width: 300px;
  height: 300px;
  margin: 100px auto;
  transform-style: preserve-3d;
  transition: all 7s;
}
.box:hover {
  transform: rotateY(180deg);
}
.front,
.back {
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  color: azure;
  font-size: 30px;
  text-align: center;
  line-height: 300px;
  border-radius: 50%;
}
.front {
  background-color: orange;
  z-index: 1;
  /* 背面隐藏 背面朝向用户时不可见 默认值是visible(可见) */
  backface-visibility: hidden;
}
.back {
  background-color: pink;
  transform: rotateY(180deg);
}

练习：盒子上下翻转

在这里插入图片描述

body {
  perspective: 400px;
}
.box {
  position: relative;
  width: 200px;
  height: 100px;
  margin: 100px auto;
  transform-style: preserve-3d;
  transition: all 2s;
}
.box:hover {
  transform: rotateX(90deg);
}
.front,
.back {
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  color: azure;
  font-size: 20px;
  text-align: center;
  line-height: 100px;
}
.front {
  background-color: orange;
  z-index: 1;
  /* 背面隐藏 背面朝向用户时不可见 默认值是visible(可见) */
  backface-visibility: hidden;
  transform: translateZ(50px);
}
.back {
  background-color: pink;
  transform: translateY(50px) rotateX(-90deg);
}

练习：旋转木马

在这里插入图片描述

body {
  perspective: 1000px;
}
section {
  position: relative;
  width: 320px;
  height: 213px;
  margin: 150px auto;
  transform-style: preserve-3d;
  animation: move 10s linear infinite;
}
section:hover {
  animation-play-state: paused;
}
@keyframes move {
  0% {
    transform: rotateY(0deg);
  }
  100% {
    transform: rotateY(360deg);
  }
}
section div {
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  background: url(media/tnt.jpeg) no-repeat;
}
section div:first-child {
  transform: translateZ(300px);
}
section div:nth-child(2) {
  transform: rotateY(60deg) translateZ(300px);
}
section div:nth-child(3) {
  transform: rotateY(120deg) translateZ(300px);
}
section div:nth-child(4) {
  transform: rotateY(180deg) translateZ(300px);
}
section div:nth-child(5) {
  transform: rotateY(240deg) translateZ(300px);
}
section div:last-child {
  transform: rotateY(300deg) translateZ(300px);
}
CSS3 的选择器、盒子模型、过渡、渐变、旋转、转换
weixin_53155105的博客
08-03 623
CSS3 新增选择器 CSS3 给我们新增了选择器，可以更加便捷，更加自由的选择目标元素 属性选择器可以根据元素特定属性的来选择元素。 这样就可以不用借助于类或者id选择器。 注意：类选择器、属性选择器、伪类选择器，权重为 10 结构伪类选择器 结构伪类选择器主要根据文档结构来选择器元素， 常用于根据父级选择器里面的子元素 nth-child（n） 选择某个父元素的一个或多个特定的子元素（重点） 总结： 伪元素选择器（重点） 伪元素选择器可以帮助我们......
CSS学习笔记
YuKing_HONG的博客
10-17 1578
个人学习PINK老师课程的笔记。个人笔记写得不好，敬请见谅，如果有问题没关系，那是正常的。记错了欢迎指出了。
CSS3中背景的高级用法！！！
帅帅邬同学的博客
04-24 482
背景半透明 - 1.强烈推荐： background: rgba(r,g,b,alpha); r,g,b 是红绿蓝的颜色， alpha 是透明度的意思，取值范围是 0~1 之间。 - 2.了解ie低版本浏览器 半透明 filter:Alpha(opacity=50) ； // opacity值为0 到 100 但是 此属性是盒子半透明，不是背景半透明哦，因为里面的内容也一起半透明了 ...
css3 rgba 高级用法
sixteen_cicle的博客
09-27 504
比如： background-color: rgb(0,0,0); background-color: rgba(0,0,0,0.8); 链接在这 http://www.360doc.com/content/13/1009/11/12424571_320027721.shtml
CSS3高级应用
Y9232的博客
05-04 228
CSS3的2D变形和3D变形的应用。
css 2D,3D转换
lzsan_的博客
04-26 381
2D: 2D平移： transform: translate(50%,100px); 元素的位移 第一个参数为水平方向移动的距离（px,%(相对于自身)) 和relative一样的效果 <div class="box"></div> div{ width: 100px; height: 100px; background-color: green; } .
自己学习html+css的详细笔记
qq_53366282的博客
05-18 1970
目录 常用符号： 6 有序列表：ol>li 6 无序列表：ul>li 7 自定义列表：dl>dt+dd 7 图片标签： 7 表格： 8 表单from： 8 CSS： 9 CSS优先级： 9 CSS选择器 10 伪类选择器： 10 CSS文本属性 11 1. 字体大小 11 2. 颜色 11 3. 加粗&倾斜 11 4. 水平垂直居中 12 5. 文本间距 12 6. 首行缩进 12 7. 文本修饰 12 8. Transform大小写 13
CSS3立体咖啡杯图形特效.zip
最新发布
10-09
总结来说，"CSS3立体咖啡杯图形特效.zip"是一个结合了CSS3 3D转换、jQuery交互和网页特效的精彩示例。它展示了如何利用现代Web技术创造出引人入胜的视觉效果。通过学习和理解这个特效的实现方式，开发者不仅可以提升...
Java学习笔记目录索引 (持续更新中)
热门推荐
Guizy
01-15 13万+
Java学习路线目录索引 一、Java基础(省略) Lambda表达式及函数式接口 二、Java数据库 MySQL 一 概念、DDL、DML、DQL、事务、约束等 数据库设计 一 多表关系、三大范式 JDBC 一 基本使用、DAO组件、连接池、JDBCTemplate 三、JavaWeb HTML相关学习 CSS — 常用属性 CSS — 选择器及三大特性 CSS — 网页的布局方式 C...........................
css笔记
PrimaryColor
07-30 534
css(层叠样式表) CSS的发展历程 从HTML被发明开始，样式就以各种形式存在不同的浏览器结合它们各自的样式语言为用户提供页面效果的控制 最初的HTML只包含很少的显示属性 随着HTML的成长，为了满足页面设计者的要求，HTML添加了很多显示功能 但是随着这些功能的增加，HTML变的越来越杂乱，而且HTML页面也越来越臃肿于是CSS便诞生了. CSS的出现，拯救了混乱的HTML，当让更加拯救了我们web开发者 让我们的网页更加丰富多彩 CSS初识 Cascading Style Sheets
【CSS3】2D 和 3D 转换用法
qq_45677671的博客
01-03 1491
转换就是可以对元素进行移动、缩放、转动、拉长或拉伸，本文列举了 2d 和 3d 转换方法的教程和案例
CSS 2D/3D转换
weixin_55730337的博客
03-30 282
xy): 定义 2D 转换，沿着 X 和 Y 轴移动元素。
CSS中2d3d转换
zzyhhh的博客
08-28 459
2D 转换 1、translate() 方法 通过 translate() 方法，元素从其当前位置移动，根据给定的 left（x 坐标） 和 top（y 坐标） 位置参数： 实例 div { transform: translate(50px,100px); } 值 translate(50px,100px) 把元素从左侧移动 50 像素，从顶端移动 100 像素。 2、rotate() 方法 通...
CSS3 2D转换与3D的转换
m0_62337846的博客
03-20 339
2D 一、2D定义： 转换的效果是让某个元素改变形状，大小与位置 二、2D转换类型： 1、translate()，根据左(x轴)和顶部(y轴)位置给定的参数，从当前元素位置移动； translate值(50px，100px)是从左边元素位置移动50个像素，并从顶部向下移动100px像素。 2、rotate()方法，在一个给定度数顺时针旋转的元素，负值是允许的，这样是让元素逆时针旋转； rotate值(30deg)元素顺时针旋转30度。 3、scale()方法，该元素增加或减小
CSS3——2D、3D转换
Alice__97的博客
06-26 492
1、2D转换方法：对元素进行旋转、缩放、移动、拉伸 transform属性： rotate(度数deg)——度数为正值，顺时针旋转；度数为负值，逆时针旋转 scale(x,y)——x为水平方向缩放倍数，y为垂直方向缩放倍数，若省略，同x；0~1缩小，>1放大 div{ transform: rotate(10deg); } img:hover{ transform: sca...
css中2D与3D转换
weixin_50795415的博客
02-21 279
2D 旋转变形 // 顺时针旋转45° transform: rotate(45deg); 旋转角度为正，则顺时针方向旋转，否则逆时针方向旋转； transform-origin属性 可以使用transform-origin属性设置自己的自定义变换原点 /* 以左上角为中心点进行旋转 */ transform-origin: 0 0; 缩放变形 // 放大三倍 transform: scale(3); 当数值小于1时，表示缩小元素；大于1时，则表示放大元素； 斜切变形 // （
CSS之 2D转换---3D转换（内含过渡）
小小Bug编写员
04-14 299
转换可以实现元素的位移、旋转、缩放等效果 2D转换 translate --- 移动 rotate --- 旋转 scale --- 缩放 1.translate 语法：(px) transform:translate(x,y); transform:translateX(n); transform:translateY(n); 不会影响其他元素的位置 （会变成前后关系） transl对于行内元素无效 —— 先转换为行内块元素后即可使用 2.rotate 语法...
CSS3 2D/3D转换
遇见更好的自己
06-16 654
Internet Explorer 10、Firefox 以及 Opera 支持 transform 属性。 Chrome 和 Safari 需要前缀 -webkit-。 Internet Explorer 9 需要前缀 -ms-。 1.2D转换 通过 translate() 方法，元素从其当前位置移动，根据给定的 left（x 坐标） 和 top（y 坐标） 位置参数：transform:
css基础--2D、3D转换
zxn200125的博客
10-21 301
css中2d、3d转换相关属性及其使用
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值