CSS3之转换(2D转换,动画，3D转换)
2024-06-20 06:41:21
@TOC
1. 2D转换
1.1 2D转换之移动translate
1.1.1 translate基本使用
<!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>translate</title><style>div {width: 200px;height: 200px;background-color: pink;/* 1. 沿x轴向右移动100px， 沿y轴向下移动200px *//* transform: translate(100px, 200px); *//* 2. 只沿x轴向右移动100px *//* transform: translateX(100px); *//* 3. 只沿Y轴向下移动100px */transform: translateY(100px);}</style>
</head>
<body><div></div>
</body>
</html>
1.1.2 translate 不会影响其他元素案例
<!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>translate</title><style>div {font-size: 50px;text-align: center;line-height: 200px;}.box1 {width: 200px;height: 200px;background-color: pink;transform: translate(50px, 50px);}.box2 {width: 200px;height: 200px;background-color: skyblue;}</style>
</head>
<body><div class="box1">box1</div><div class="box2">box2</div>
</body>
</html>
1.2 旋转
1.2.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>旋转</title><style>div {width: 200px;height: 200px;background-color: skyblue;/* 顺时针旋转45度 */transform: rotate(45deg);}</style>
</head>
<body><div></div>
</body>
</html>
1.2.2 添加过渡效果的旋转
<!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>旋转</title><style>div {width: 200px;height: 200px;background-color: skyblue;/* 添加过渡效果 */transition: all 1s;}div:hover {/* 顺时针旋转45度 */transform: rotate(45deg);}</style>
</head>
<body><div></div>
</body>
</html>
1.2.3 旋转案例–三角形旋转
<!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>案例-三角形</title><style>div {width: 100px;height: 100px;border: 20px solid transparent;border-right-color: black;border-bottom-color: black;transform: rotate(-45deg);transition: all 1s;margin: 0 auto;}div:hover {transform: rotate(45deg);}</style>
</head>
<body><div></div>
</body>
</html>
1.3 设置2D转换中心点
<!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>设置2D转换中心点</title><style>div {width: 200px;height: 200px;background-color: skyblue;font-size: 50px;/* 设置旋转中心点 *//* transform-origin: 20px 20px; */transform-origin: left bottom;/* 设置过渡效果 */transition: all 1s;margin: 200px;}div:hover {transform: rotate(180deg);}</style>
</head>
<body><div>div盒子</div>
</body>
</html>
1.3.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>设置2D转换中心点</title><style>div {overflow: hidden;width: 200px;height: 200px;background-color: skyblue;border: 2px solid skyblue;font-size: 50px;margin: 100px auto;}div img {width: 100%;height: 100%;/* 设置旋转中心点 */transform-origin: left bottom;/* 设置过渡效果 */transition: all 1s;transform: rotate(180deg);}div:hover img{transform: rotate(0deg);}</style>
</head>
<body><div><img src="xxx" alt=""></div>
</body>
</html>1.4 2D转换之缩放scale
<!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>Document</title><style>div {width: 200px;height: 200px;background-color: skyblue;}div:hover {/* 1.里面写的数字不跟单位就是倍数的意思1就是1倍 2就是2倍*//* transform:scale(x, y); *//* transform: scale(2, 2); *//* 2.修改了宽度为原来的2倍 高度不变*//* transform: scale(2, 1); *//*3.等比例缩放同时修改宽度和高度，我们有简单的写法以下是宽度修改了2倍，高度默认和第一个参数一样*//* transform: scale(2); *//* 4.我们可以进行缩小 小于1就是缩放*//* transform: scale(0.5, 0.5); */transform: scale(0.5);/* 5. scale的优势之处: 不会影响其他的盒子而且可以设置缩放的中心点*/}</style>
</head><body><div></div>
</body></html>
1.4.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>放大案例</title><style>div {overflow: hidden;float: left;border: 2px solid skyblue;}div img {transition: all .4s;}div img:hover {transform: scale(1.1);}</style>
</head>
<body><div><a href="#"><img src="img/true (1).jpg" alt=""></a></div><div><a href="#"><img src="img/true (1).jpg" alt=""></a></div><div><a href="#"><img src="img/true (1).jpg" alt=""></a></div>
</body>
</html>
1.5 2D旋转综合写法（重要）
<!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>8.2D旋转综合写法</title><style>div {width: 200px;height: 200px;background-color: skyblue;/* 添加过渡 */transition: all .4s;}div:hover {/* 综合写法时，千万不要将rotate放到前面，因为是按顺序执行的，要放到前面的话首先执行旋转，然后再移动，那么旋转时会改变原本的坐标导致移动的方向错误 */transform: translate(200px) rotate(360deg) scale(.5);}</style>
</head>
<body><div></div>
</body>
</html>
错误次序造成的结果
<!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>8.2D旋转综合写法</title><style>div {width: 200px;height: 200px;background-color: skyblue;/* 添加过渡 */transition: all .4s;}div:hover {/* 错误写法造成的结果 */transform: rotate(360deg) translate(200px) scale(.5);}</style>
</head>
<body><div></div>
</body>
</html>
2. 动画
2.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>动画的基本使用</title><style>/* 需求：页面一打开，盒子就从左走到右边 *//* 第一步：定义动画 */@keyframes move {/* 开始状态 */0% {transform: translateX(0px);}/* 结束状态 */100% {transform: translateX(1000px);}}div {width: 200px;height: 200px;background-color: skyblue;/* 第二大步：调用动画 */animation-name: move;/* 设置动画持续时间 */animation-duration: 2s;}</style>
</head>
<body><div></div>
</body>
</html>
from 和 to 等价于 0% 和100%
<!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>动画的基本使用</title><style>/* from 和 to 等价于 0% 和100% *//* 第一步：定义动画 */@keyframes move {/* 开始状态 */from {transform: translateX(0px);}/* 结束状态 */to {transform: translateX(1000px);}}div {width: 200px;height: 200px;background-color: skyblue;/* 第二大步：调用动画 */animation-name: move;/* 设置动画持续时间 */animation-duration: 2s;}</style>
</head>
<body><div></div>
</body>
</html>
2.2 动画序列
<!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>动画序列</title><style>/* 第一步：定义动画 *//* 1.可以左多个状态的变化 keyframe 关键帧2.里面的百分比要是整数3.百分比就是总的时间的比例的划分，以10s为例，25%就是2.5s时刻元素的状态*/@keyframes move {0% {transform: translate(0, 0);}25% {transform:translate(1000px, 0);}50% {transform: translate(1000px, 500px);}75% {transform: translate(0px, 500px);}100% {transform: translate(0px, 0px);}}div {width: 200px;height: 200px;background-color: skyblue;/* 第二大步：调用动画 */animation-name: move;/* 设置动画持续时间 */animation-duration: 2s;}</style>
</head>
<body><div></div>
</body>
</html>
2.3 动画的常见属性
<!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>动画属性</title><style>/* 第一步：定义动画 *//* 1.可以左多个状态的变化 keyframe 关键帧2.里面的百分比要是整数3.百分比就是总的时间的比例的划分，以10s为例，25%就是2.5s时刻元素的状态*/@keyframes move {0% {transform: translate(0, 0);}100% {transform: translate(500px, 0px);}}div {width: 200px;height: 200px;background-color: skyblue;/* 第二大步：调用动画 */animation-name: move;/* 设置动画持续时间 */animation-duration: 2s;/* 运动曲线 */animation-timing-function: ease;/* 何时开始 */animation-delay: 1s;/* 动画重复次数 infinite 为无限次 *//* animation-iteration-count: infinite; *//* 是否反向播放 默认为normal，alternate表示从左边走到右边后，再从右边走回左边，而不是突然回到左边*/animation-direction: alternate;/* 动画结束后的状态 默认为backwards，即回到起始状态，若要停留在结束状态，则设为forwards */animation-fill-mode: forwards;}div:hover {/* 鼠标经过就停止动画，离开则继续动画 */animation-play-state: paused;}</style>
</head>
<body><div></div>
</body>
</html>
2.4 动画的简写属性
<!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>动画简写属性</title><style>/* 第一步：定义动画 */@keyframes move {0% {transform: translate(0, 0);}100% {transform: translate(500px, 0px);}}div {width: 200px;height: 200px;background-color: skyblue;/* 第二大步：调用动画 *//* animation:name duration timing-function delay iteration-count direction fill-mode *//* 注意：前两个属性一定要写，虽然第二个属性可以不写，不写默认为0，但是0秒没有意义 */animation: move 2s ease 1s alternate forwards;}div:hover {/* 鼠标经过就停止动画，离开则继续动画 */animation-play-state: paused;}</style>
</head>
<body><div></div>
</body>
</html>
2.5 速度曲线
<!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>速度曲线步长</title><style>@keyframes w {0% {width: 0px;}100% {width: 200px;}}div {width: 0px;height: 30px;background-color: skyblue;/* animation: name duration timing-function delay iteration-count direction fill-mode; *//* steps 就是分几步来完成我们的动画， 有了steps就不要再写ease或linear之类的了 */animation: w 4s steps(10) forwards;</style>
</head>
<body><div></div>
</body>
</html>
2.5.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>速度曲线步长</title><style>@keyframes w {0% {width: 0px;}100% {width: 200px;}}div {width: 0px;height: 30px;font-size: 20px;overflow: hidden;/* 强制让文字一行显示 */white-space: nowrap;/* animation: name duration timing-function delay iteration-count direction fill-mode; *//* steps 就是分几步来完成我们的动画， 有了steps就不要再写ease或linear之类的了 */animation: w 4s steps(10) forwards;}</style>
</head>
<body><div>世纪佳缘我在这里等你</div>
</body>
</html>
2.5.2 案例—奔跑的熊大
<!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>15.奔跑的熊大</title><style>.beijing-1 {overflow: hidden;position: relative;width: 100%;height: 336px;background: url(img/hxs.png) no-repeat;background-size: 3840px 336px;opacity: 0.5;animation: hxsMove 8s linear infinite;}.beijing-2 {position: absolute;top: 83px;left: 0%;width: 100%;height: 336px;background: url(img/xs.png) no-repeat;background-size: 3840px 336px;animation: bxsMove 5.6s linear infinite;}.bearLayer {position: absolute;top: 250px;left: 0%;width: 200px;height: 100px;overflow: hidden;background: url(img/xd.png) no-repeat;animation: bearRun 2s steps(8) infinite, moveMiddle 3s linear forwards;}@keyframes bearRun {0% {background-position: 0 0;}100% {background-position: -1600px 0;}}@keyframes moveMiddle {0% {left: 0px;}100% {left: 50%;transform: translateX(-50%);}}@keyframes hxsMove {0% {background-position: 0 0;}100% {background-position: -1200px 0;}}@keyframes bxsMove {0% {background-position: 0 0;}100% {background-position: -1200px 0;}}</style>
</head>
<body><div class="beijing-1"><div class="beijing-2"></div></div><div class="bearLayer"></div>
</body>
</html>
3. 3D转换
3.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>3D移动translate3d</title><style>div {width: 200px;height: 200px;background-color: skyblue;/* 移动单个方向 *//* transform: translateX(100px);transform: translateY(100px); transform: translateZ(100px); *//* 合并写 */transform: translateX(100px) translateY(100px) translateZ(100px);/* 简写 translate()为2d移动 translate3d()为3D移动 */transform: translate3d(100px, 100px, 100px);/* 简写时 x，y，z均不能省略，如果没有就写0 */transform: translate3d(0, 100px, 100px);}</style>
</head>
<body><div></div>
</body>
</html>
3.2 透视 perspective
3.3 translateZ
<!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>3D移动translate3d</title><style>body {/* perspective 就是视距 */perspective: 500px;}div {width: 200px;height: 200px;background-color: skyblue;margin: 0 auto;transform: translate3d(0, 0, 100px);}</style>
</head>
<body><div></div>
</body>
</html>
3.4 3D旋转 rotate3D
3.5 rotateX
<!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>3D旋转rotateX</title><style>body {perspective: 500px;}div {width: 253px;height: 253px;margin: 0 auto;}div:hover {transform: rotateX(45deg);}</style>
</head>
<body><div><img src="img/true (1).jpg" alt=""></div>
</body>
</html>
3.6 rotateY
<!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>3D旋转rotateX</title><style>body {perspective: 500px;}div {width: 253px;height: 253px;margin: 0 auto;}div:hover {transform: rotateY(45deg);}</style>
</head>
<body><div><img src="img/true (1).jpg" alt=""></div>
</body>
</html>
3.7 rotate3D
3.8 3D呈现 transform-style
<!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>19. 3D呈现transform-style</title><style>.box {perspective: 500px;position: relative;width: 200px;height: 300px;/* background-color: aqua; */margin: 100px auto;transform-style: preserve-3d;transition: all .4s;}.box:hover {transform: rotateY(60deg);}.box div {position: absolute;top: 0;left: 0;width: 100%;height: 100%;background-color: skyblue;}.box div:last-child {background-color: pink;transform: rotateX(60deg);}</style>
</head>
<body><div class="box"><div></div><div></div></div>
</body>
</html>
3.9 两面反转的盒子案例
<!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>20.两面反转的盒子案例</title><style>body {perspective: 400px;}.box {position: relative;width: 200px;height: 200px;transform-style: preserve-3d;transition: all 1s;margin: 100px auto;}.front, .back {position: absolute;top: 0;left: 0;width: 100%;height: 100%;font-size: 30px;text-align: center;line-height: 200px;border-radius: 50%;/* 一定要设置背面不可见，不然背面出不来 */backface-visibility: hidden;}.front {background-color: red;z-index: 1;}.back {background-color: skyblue;transform: rotateY(180deg);}.box:hover {transform: rotateY(180deg);}</style>
</head>
<body><div class="box"><div class="front">某某程序员</div><div class="back">pink老师等你</div></div>
</body>
</html>## 3.10 3D导航栏
```javascript
<!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>3D导航栏</title><style>body {perspective: 500px;}* {margin: 0;padding: 0;}ul {margin-top: 100px;margin-left: 100px;}li {float: left;margin-right: 20px;list-style: none;width: 120px;height: 35px;}.box {position: relative;width: 100%;height: 100%;text-align: center;transform-style: preserve-3d;transition: all .4s;}.box:hover {transform: rotateX(90deg);}.front,.bottom {position: absolute;top: 0;left: 0;width: 100%;height: 100%;}.front {background-color: pink;z-index: 1;/* 将其向前移动17.5像素，这样旋转中心点在正方体中心，旋转时不会变形 */transform: translateZ(50%);}.bottom {background-color: skyblue;/* 如果有移动，或者其他样式，必须先写移动 */transform: translateY(50%) rotateX(-90deg) ;}</style>
</head><body><ul><li><div class="box"><div class="front">某某程序员</div><div class="bottom">pink老师等你</div></div></li><li><div class="box"><div class="front">某某程序员</div><div class="bottom">pink老师等你</div></div></li><li><div class="box"><div class="front">某某程序员</div><div class="bottom">pink老师等你</div></div></li><li><div class="box"><div class="front">某某程序员</div><div class="bottom">pink老师等你</div></div></li><li><div class="box"><div class="front">某某程序员</div><div class="bottom">pink老师等你</div></div></li></ul></body></html>
3.11 浏览器的私有前缀
CSS3之转换(2D转换,动画，3D转换)相关推荐
- 2D转换 动画 3D转换
好烦好烦好烦好烦好烦好烦好烦好烦好烦好困好困好困好困好困好困 transform:sacle(x,y) 缩放 缩放 x y放倍数 宽度,高度 注意其中x y用逗号分隔 可以是小数 不会影响其他盒子 鼠 ...
- 2D转换 + 动画 + 3D转换
1. 2D 转换 转换(transform)是CSS3中最具有颠覆性的特性之一,可以实现元素的位移.旋转.缩放等效果 移动:translate 旋转:rotate 缩放:scale 1.1 二维坐标系 ...
- 2D转换+动画+3D转换
文章目录 2D转换 translate 实现盒子的竖直和水平居中 rotate origin 缩放scale 综合写法 渐变 动画 动画序列 基本使用 动画属性 3D转换 3D移动translate3 ...
- css3之[2D转化,动画,3D转化] 彩蛋之3D立方体
css3 新特性之2D 1. 2D转化-位移 语法:/* 1.单个写 *//* 转换 transform*//* 沿着X轴方向移动 translateX*/transform: translateX( ...
- html,css基础(2)~浮动布局，弹性布局，css2D,3D转换，css动画，长度单位
目录 1,浮动布局 2,弹性布局 3,CSS 2D 转换 4,CSS 3D 转换 5,css动画 6,长度单位 7,元素,文本阴影 8,表单元素 9,响应式布局 1,浮动布局 float,设置元素使用 ...
- 25CSS3中的3D转换
技术交流QQ群:1027579432,欢迎你的加入! 1.现实中的3D有什么特点? 近大远小 物体后面遮挡不可见 2.三维坐标系 三维坐标系其实就是指立体空间,立体空间是由3个轴共同组成的. x轴:水 ...
- css3变换、过渡与动画_带有CSS3过渡和变换的画布菜单
css3变换.过渡与动画 Now as an easy to use jQuery Plugin 现在作为易于使用的jQuery插件 介绍 ( Introduction ) Off Canvas Me ...
- 如何使用3D Converter将2D视频转换为3D？
3D Converter for Mac是一款3D转换软件,能够将普通 2D 视频转换为 3D视频,还可以将 3D 视频转换为 3D 视频(不同模式)以及将 3D 视频转换为 2D 视频.那么如何使用 ...
- CSS3新特性——新增选择器，2D/3D转换，动画
CSS3新特性--新增选择器,2D/3D转换,动画 欢迎大家去博客冰山一树Sankey,浏览效果更好.直接右上角搜索该标题即可 博客园主页:博客园主页-冰山一树Sankey CSDN主页:CSDN主页 ...
- css3中的2D和3D转换、动画效果以及布局
文章目录 一.2D转换: 1. 2D移动:translate().使用translate()函数,你可以把元素从原来的位置移动.移动参照元素左上角原点 2. 2D缩放: 3. 2D旋转: 4. 2D翻 ...
最新文章
- 1.QT元对象系统、信号槽概述、宏Q_OBJECT
- Code-First Migrations随Entity Framework 4.3一同发布
- Hbase 技术细节笔记（上）
- 0420第一次团队合作
- 总结了200道经典的机器学习面试题 (附参考答案)
- cojs 香蕉 解题报告
- 【ElasticSearch】es 线程池 ThreadPool 的封装
- sql full left right inner cross 基础
- 机器学习（周志华）——决策树问题
- [置顶] 从工作流引擎设计来看人精神活动的一些问题
- Lambda表达式实现有限状态机
- 第10题 正则表达式匹配（动态规划）
- flac批量转mp3，详细步骤
- 低通滤波器降噪matlab,基于MATLAB语音信号降噪处理方法研究
- python处理xps文件_xps/pdf/png/json转换
- 粗虚线和细虚线_高速虚线两侧是粗虚线 高速公路虚线两边加斜线什么意思？...
- [统计模型] 基于R的潜在剖面分析(LPA)
- 《软技能——代码之外的生存指南》读书笔记之职业（一）
- Java clk啥意思_clock (CLK)是什么意思
- 全面解读数字经济内涵 大力推动数字经济发展