CSS2D3D动画效果

已于 2022-10-15 22:24:11 修改
阅读量456 收藏 1
点赞数
分类专栏： 前端 web实践案例 文章标签： css 3d css3
于 2022-10-15 18:59:24 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_57780589/article/details/127309802
版权

这里写目录标题

2D转换

位移translate、旋转rotate、缩放scale

translate不影响其他的元素，对行内元素无效
在这里插入图片描述
在这里插入图片描述

<!DOCTYPE html>
<html lang="en" xmlns="http://www.w3.org/1999/html" xmlns="http://www.w3.org/1999/html">
<head>
    <meta charset="UTF-8">
    <title>练习</title>
    <link rel="stylesheet" href="src\web.css">
    <script type="text/javascript" src="Javascript src\web.js"></script>
<!--    切记单词别打错了-->
    <style>
div {
position:relative;
width:500px;
height:500px;
background-color:pink;
transform:translateX(50%);
}
p{
position:absolute;
top:50%;
left:50%;
width:200px;
height:200px;
background-color:purple;
transform:translate(-50%,-50%);
}
    </style>
</head>
<body>
<div>
    <p></p>
</div>
<!--<span></span>行内用translate无效-->
</body>
</html>

rotate旋转

在这里插入图片描述

  <style>
img{
width:150px;
transform:rotate(45deg);
}
    </style>
</head>
<body>
<img src="img/01.png" alt="">
</body>

案例
旋转动态效果

<!DOCTYPE html>
<html lang="en" xmlns="http://www.w3.org/1999/html" xmlns="http://www.w3.org/1999/html">
<head>
    <meta charset="UTF-8">
    <title>练习</title>
    <link rel="stylesheet" href="src\web.css">
    <script type="text/javascript" src="Javascript src\web.js"></script>
<!--    切记单词别打错了-->
    <style>
img{
width:150px;
border-radius:50%;
border:5px solid skyblue;
transition:all 0.3s;
}
img:hover {
transform:rotate(360deg);
}
    </style>
</head>
<body>
<img src="img/01.png" alt="">
</body>
</html>

三角

<!DOCTYPE html>
<html lang="en" xmlns="http://www.w3.org/1999/html" xmlns="http://www.w3.org/1999/html">
<head>
    <meta charset="UTF-8">
    <title>练习</title>
    <link rel="stylesheet" href="src\web.css">
    <script type="text/javascript" src="Javascript src\web.js"></script>
<!--    切记单词别打错了-->
    <style>
div{
position:relative;
width:249px;
height:35px;
border:1px solid #000;
}
div::after{
content:"";
position:absolute;
top:8px;
right:15px;
width:10px;
height:10px;
border-right:1px solid #000;
border-bottom:1px solid #000;
transform:rotate(45deg);
transition:all 0.2s;
}
div:hover::after {
transform:rotate(225deg);
}
    </style>
</head>
<body>
<div></div>
</body>
</html>

transform-origin转换中心点

x y用空格隔开
在这里插入图片描述

<!DOCTYPE html>
<html lang="en" xmlns="http://www.w3.org/1999/html" xmlns="http://www.w3.org/1999/html">
<head>
    <meta charset="UTF-8">
    <title>练习</title>
    <link rel="stylesheet" href="src\web.css">
    <script type="text/javascript" src="Javascript src\web.js"></script>
<!--    切记单词别打错了-->
    <style>
div{
width:200px;
height:200px;
background-color:pink;
margin:100px auto;
transition:all 1s;
transform-origin:left bottom;
<!--transform-origin:50px 50px;-->
}
div:hover{
transform:rotate(360deg);
}
    </style>
</head>
<body>
<div></div>
</body>
</html>

scale缩放

不会影响其他盒子，而且可以设置缩放的中心点，参数用逗号隔开
在这里插入图片描述
在这里插入图片描述
代码同上

  <style>
div{
width:200px;
height:200px;
background-color:pink;
margin:100px auto;
transition:all 1s;
transform-origin:left bottom;
<!--transform-origin:50px 50px;-->
}
div:hover{
transform:scale(2,1);
}
    </style>

案例
图片缩放

<!DOCTYPE html>
<html lang="en" xmlns="http://www.w3.org/1999/html" xmlns="http://www.w3.org/1999/html">
<head>
    <meta charset="UTF-8">
    <title>练习</title>
    <link rel="stylesheet" href="src\web.css">
    <script type="text/javascript" src="Javascript src\web.js"></script>
<!--    切记单词别打错了-->
    <style>
img{
width:100px;
height:100px;

}
div{
overflow:hidden;
float:left;
margin:10px;
}
div img{
transition:all 0.4s;
}
div img:hover{
transform:scale(1.1);
}
    </style>
</head>
<body>
<div>
    <a href="#"><img src="img/01.png" alt=""></a>
</div>
<div>
    <a href="#"><img src="img/01.png" alt=""></a>
</div>
<div>
    <a href="#"><img src="img/01.png" alt=""></a>
</div>
</body>
</html>

分页按钮

<!DOCTYPE html>
<html lang="en" xmlns="http://www.w3.org/1999/html" xmlns="http://www.w3.org/1999/html">
<head>
    <meta charset="UTF-8">
    <title>练习</title>
    <link rel="stylesheet" href="src\web.css">
    <script type="text/javascript" src="Javascript src\web.js"></script>
<!--    切记单词别打错了-->
    <style>
li{
float:left;
width:30px;
height:30px;
border:1px solid pink;
margin:10px;
text-align:center;
line-height:30px;
list-style:none;
border-radius:50%;
cursor:pointer;
transition：all .4s;
}
li:hover{
transform:scale(1.1);
}
    </style>
</head>
<body>
<ul>
    <li>1</li>
    <li>2</li>
    <li>3</li>
    <li>4</li>
    <li>5</li>
    <li>6</li>
    <li>7</li>
</ul>
</body>
</html>

顺序：
在这里插入图片描述

动画

在这里插入图片描述

先定义动画、再调用动画
用keyframes定义

@keyframes 动画名称{
0%{
width:100px;
}
100%{
width:200px;
}
}

使用动画

div{
width:200px;
height:200px;
background-color:aqua;
margin:100px auto;
animation-name:动画名称;
animation-duration:持续时间;
}

属性
在这里插入图片描述

<!DOCTYPE html>
<html lang="en" xmlns="http://www.w3.org/1999/html" xmlns="http://www.w3.org/1999/html">
<head>
    <meta charset="UTF-8">
    <title>练习</title>
    <link rel="stylesheet" href="src\web.css">
    <script type="text/javascript" src="Javascript src\web.js"></script>
<!--    切记单词别打错了-->
    <style>
@keyframes move{
0%{
transform:translate(0,0);
}
100%{
transform:translate(1000px,0);
}
}
div{
width:100px;
height:100px;
background-color:pink;
animation-name:move;
animation-duration:2s;
animation-timing-function:ease;
animation-delay:1s;
animation-iteration-count:infinite;
animation-direction:alternate;
<!--animation-fill-mode:forwards;停留再结束状态-->
}
    </style>
</head>
<body>
<div></div>
</body>
</html>

简写属性：

animation:move 2s linear 0s 1 alternate forwards;

在这里插入图片描述
在这里插入图片描述
速度曲线
可做打字机效果
在这里插入图片描述
在这里插入图片描述
添加多个动画用逗号隔开
在这里插入图片描述

3D转换

近大远小，遮挡看不见
在这里插入图片描述

translate3D移动

在这里插入图片描述
简写：
在这里插入图片描述
一定有3d，d小写
x y z不能省略，没有就写0

transform:translate3d(x,y,z);

perspective透视

写再父级上
在这里插入图片描述
3d旋转rotate3d
在这里插入图片描述

transform:rotate3d(x,y,z,45deg)

x:左手拇指向右
y:……下

transfrom-style

保持3d状态，很重要
在这里插入图片描述
案例：
两面翻转的盒子

<!DOCTYPE html>
<html lang="en" xmlns="http://www.w3.org/1999/html" xmlns="http://www.w3.org/1999/html">
<head>
    <meta charset="UTF-8">
    <title>练习</title>
    <link rel="stylesheet" href="src\web.css">
    <script type="text/javascript" src="Javascript src\web.js"></script>
<!--    切记单词别打错了-->
    <style>
body{
perspective:400px;
}
.box{
position:relative;
width:300px;
height:300px;
margin:100px auto;
transition:all .4s;
transform-style:preserve-3d;
}
.box:hover{
transform:rotateY(180deg);
}
.front,
.back{
position:absolute;
top:0;
left:0;
width:100%;
height:100%;
border-radius:50%;
font-size:30px;
color:#fff;
text-align:center;
line-height:300px;
}
.front{
background-color:pink;
z-index:1;
}
.back{
background-color:purple;
transform:rotateY(180deg);
}
    </style>
</head>
<body>
<div class="box">
    <div class="front">当我男朋友吧</div>
    <div class="back">我们分了吧</div>
</div>
</body>
</html>

在这里插入图片描述
3D导航栏

<!DOCTYPE html>
<html lang="en" xmlns="http://www.w3.org/1999/html" xmlns="http://www.w3.org/1999/html">
<head>
    <meta charset="UTF-8">
    <title>练习</title>
    <link rel="stylesheet" href="src\web.css">
    <script type="text/javascript" src="Javascript src\web.js"></script>
<!--    切记单词别打错了-->
    <style>
*{
padding:0;
margin:0;
}

ul{
margin:100px;
}
ul li{
float:left;
margin:0 5px;
width:120px;
height:35px;
list-style:none;
perspective:500px;
}
.box{
positive:relative;
width:100%;
height:100%;
transform-style:preserve-3d;
transition:all .4s;
}
.box:hover{
transform:rotateX(90deg);
}
.front,
.bottom{
position:absolute;
left:0;
top:0;
width:100%;
height:100%;
}

.front{
background-color:pink;
z-index:1;
transform:translateZ(17.5px);
}
.bottom{
background-color:purple;
transform: translateY(17.5px) rotateX(-90deg);
}
    </style>
</head>
<body>
<ul>
    <li>
        <div class="box">
        <div class="front">心情好</div>
        <div class="bottom">心情不好</div>
        </div>
    </li>
    <li>
        <div class="box">
            <div class="front">心情好</div>
            <div class="bottom">心情不好</div>
        </div>
    </li>
    <li>
        <div class="box">
            <div class="front">心情好</div>
            <div class="bottom">心情不好</div>
        </div>
    </li>
    <li>
        <div class="box">
            <div class="front">心情好</div>
            <div class="bottom">心情不好</div>
        </div>
    </li>

</ul>
</body>
</html>

旋转木马案例

<!DOCTYPE html>
<html lang="en" xmlns="http://www.w3.org/1999/html" xmlns="http://www.w3.org/1999/html">
<head>
    <meta charset="UTF-8">
    <title>练习</title>
    <link rel="stylesheet" href="src\web.css">
    <script type="text/javascript" src="Javascript src\web.js"></script>
<!--    切记单词别打错了-->
    <style>
*{
padding:0;
margin:0;
}
body{
perspective:1000px;
}
section{
position:relative;
width:300px;
height:200px;
margin:150px auto;
transform-style:preserve-3d;
animation:rotate 5s linear infinite;

}
section:hover{
animation-play-state:paused;
}
@keyframes rotate{
0%{
transform:rotateY(0);
}
100%{
transform:rotateY(360deg);
}
}

section div{
position:absolute;
top:0;
left:0;
width:100%;
height:100%;
}
img {
width:200px;
height:200px;
}
section div:nth-child(1) {
transform:rotateY(0deg) 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:nth-child(6) {
transform:rotateY(300deg) translateZ(300px);
}
    </style>
</head>
<body>
<section>
    <div><img src="img/222.jpg" alt="" /> </div>
    <div><img src="img/333.jpg" alt="" /></div>
    <div><img src="img/444.jpg" alt="" /></div>
    <div><img src="img/555.jpg" alt="" /></div>
    <div><img src="img/666.jpg" alt="" /></div>
    <div><img src="img/444.jpg" alt="" /></div>
</section>
</body>
</html>

在这里插入图片描述

佳美不ERROR
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
专栏目录
CSS3过渡旋转透视2d3d动画等效果
MaNqo的博客
03-15 2200
才发现CSS3原来这么好用… CSS3盒子模型 CSS3中可以通过 box-sizing 来指定盒模型，有2个值，即可指定为 content-box、border-box，这样计算盒子大小的方式就发生了改变。 box-sizing: content-box 盒子大小为 width+padding+border(默认) box-sizing: border-box 盒子大小为 width (前提padding和border不会超过width宽度) * { margin: 0; pad.
CSS的2D及3D动效
dai_jiaxing的博客
04-13 101
个人整理的CSS的3D和2D动效知识点，还有什么重要的知识点欢迎大佬添加 (っ◔◡◔)っ
css2d炫酷效果,CSS3炫酷效果-swing、疯狂摆动、脉冲
weixin_33160876的博客
08-04 422
今天跟大家分享CSS3动画效果公用代码div{float:left;width:300px;height:200px;margin:05px;background:#F39;}p{text-align:center;color:#fff;font:16px/200px微软雅黑;}swing效果.swing{transform-origin:centertop0;}/*设置旋转...
前端学习-过渡、2d和3d动画
weixin_51346866的博客
03-06 601
简单介绍一下过渡和动画常用属性。
如何用CSS实现2D与3D的转换效果（transform）
NOyesNONO_的博客
12-17 448
css的兼容性问题 w3c成员：各大互联网巨头相关 它设定了整个平台的规则，监督整个过程。 css3要考虑兼容性问题。 浏览器前缀 ： 谷歌 苹果 -webkit- 火狐 -moz- IE -ms- 欧朋 -o- 谷歌 苹果 -webkit- 火狐 -moz- IE -ms- 欧朋 -o- 2D过渡方式（transition-后缀） transition 过渡 之前：元素从一个状态到另外一个状态（hover）直接切换，从开始状态到结束状态瞬间完成，中间过程几乎不可见。 c
CSS3实现3D文字动画效果
12-04
这段代码定义了一个具有3D动画效果的标题，背景色为#333。`<h1>`元素被设置为绝对定位，字体大小为90px，使用了多个不同的字体作为备选，并设置了颜色、位置和动画效果。这里的动画效果是`slidein`，它通过`-moz-...
CSS3 3D圆点波浪动画特效
06-24
在CSS3中，我们可以为每个圆点设置独立的样式和动画效果，通过JavaScript进行动态控制，使整个动画更加灵活多变。在这个特效中，每个圆点的3D位置、大小、颜色以及运动轨迹都可能有所变化，使得波浪动画更富动态美感...
CSS3-3D动画制作旋转立方体
01-20
在CSS3中，3D动画提供了丰富的视觉效果，使得网页设计更加生动有趣。本文将详细介绍如何使用CSS3创建一个旋转的立方体...在实际项目中，可以依据需求调整旋转角度、速度和颜色等参数，以实现各种自定义的3D动画效果。
CSS3立方体3D旋转加载动画.zip
05-14
动画部分，CSS3提供了`animation`属性，可以创建复杂的动画效果。通过定义`@keyframes`规则，我们可以指定元素在不同时间点的状态。例如，在3D立方体旋转动画中，可能需要在关键帧中设定不同的旋转角度，让立方体...
css3动画图标效果
10-31
CSS3是层叠样式表（Cascading Style Sheets）的第三个主要版本，它引入了许多新的特性和功能，其中最引人注目的就是动画效果。在本主题“CSS3动画图标效果”中，我们将深入探讨如何利用CSS3来创建富有动态感的图标...
HTML前端大数据可视化大屏电子沙盘合集案例源码，数据可视化图表案例.zip
05-22
HTML前端大数据可视化大屏电子沙盘合集使用HTML、CSS、JavaScript，实现的可视化大数据电子沙盘，项目基于html/css/js，包含行业：，智慧政务，智慧社区，金融行业，智慧交通，智慧门店，智慧大厅，智慧物流，智慧医疗，通用模板，大数据分析平台。项目包含功能 (部分)：实时数据K线图（可自由配置多种行业模式），可切换式大屏展示 ，翻牌效果等等数据可视化大屏电子沙盘集合，基于：HTML/CSS/Echarts等等，包含行业：区块链金融行业、智慧社区、智慧物业、智慧政务、智慧交通、通用模板等，包含功能：自定义字体、Css动画、WebSocket实时数据、K线折线等各种图表，iframe嵌套H5数据可视化大屏电子沙盘集合，基于：HTML/CSS/Echarts等等，包含行业：区块链金融行业、智慧社区、智慧物业、智慧政务、智慧交通、通用模板等，包含功能：自定义字体、Css动画、WebSocket实时数据、K线折线等各种图表，iframe嵌套H5数据可视化大屏电子沙盘集合，基于：HTML/CSS/Echarts等等，包含行业：区块链金融行业、智慧社区、智慧物业、智慧政务、智慧交通
数据可视化大屏展示特效实例（jquery+bootstrap+echarts）
12-27
jquery+bootstrap+echarts数据可视化大屏展示特效实例 项目描述： 数据可视化大屏展示用的越来越多，自己也捣鼓做一个。 运行环境： Chrome 项目技术(必填)： jquery+bootstrap+echarts
2D动画和3D动画详细版（一些样式建议用图片才能看出来）
weixin_58447501的博客
03-29 286
2D动画和3D动画详细版
【CSS】CSS新增的2D和3D效果
连通块的应用
09-14 352
1.透视（perspective） 也就时近大远小的效果，给一些动画添加的效果，使其更有立体感。 perspective: 视距；值越大效果越不明显，但为0的时候没有效果。 这个特性添加给父盒子。 给出一个开门案例： 实现效果为：当鼠标经过时，门打开，移走时，门关闭； 代码如下： <!DOCTYPE html> <html> <head> <me...
CSS3新增之 2D/3D变换
qq_53165476的博客
06-06 124
开启3D空间，重要原则：元素进行3D变换前，父元素必须开启3D空间！多个变换，可以同时使用一个transform 来编写。在2D旋转的基础上，可以让元素沿x与y轴旋转，在2D位移的基础上，可以让元素沿Z轴位移.在2D缩放的基础上，可以让元素沿Z轴缩放.即观察者位置，默认的透视点在元素的中心。让元素在二维平面内，顺或逆时针旋转。缩放：让元素放大或缩小。
CSS3仿腾讯专题页，实现3D旋转效果
最爱喝怡宝的博客
11-26 269
布局部分： <div class="nav"> <div class="box box1"> <a href="#"> <div class="border b1"><img src="./img/n1.png" alt=""></div> </a> </div> <div class="box box2">
大数据可视化大屏实战项目（71）大数据可视化系统数据分析通用模版---HTML+CSS+JS【源码在文末】（可用于比赛项目或者作业参考中）
m0_63324772的博客
09-10 269
大数据可视化大屏实战项目（71）大数据可视化系统数据分析通用模版---HTML+CSS+JS【源码在文末】（可用于比赛项目或者作业参考中🐕🐕🐕）
3D数据可视化大屏，超炫酷 -
前端小白-Mr鹏帅
11-29 2751
最近上线的项目如上。 本次将会围绕这一大屏应用的部分技术进行分享，其中包含以下内容： 路径 能量光罩于噪声处理 bloom辉光 飞线 视频材质的应用 1. 路径 路径可以说是我们在可视化开发中较为常用了。 线的显示本身是路径，飞线的方向需要路径，物体按照某轨道移动也需要路径。 1.1 路径移动 路径移动的实现很简单，使用THREE.CurvePath插值工具配合动画工具就可以达到效果。 这里与@tweenjs/tween.js配合使用，编写了..
一个简单炫酷的前端小项目（html+css+js）----3D图片演示
热门推荐
hsingle的博客
04-14 1万+
一个简单炫酷的前端小项目（html+css+js）----3D图片演示前言一、页面动画视频展示二、使用步骤1.引入库2.读入数据总结新的改变功能快捷键合理的创建标题，有助于目录的生成如何改变文本的样式插入链接与图片如何插入一段漂亮的代码片生成一个适合你的列表创建一个表格设定内容居中、居左、居右SmartyPants创建一个自定义列表如何创建一个注脚注释也是必不可少的KaTeX数学公式新的甘特图功能，丰富你的文章UML 图表FLowchart流程图导出与导入导出导入 提示：文章写完后，目录可以自动生成，如何
css3 3d 轮播
最新发布
10-23
CSS3 3D 轮播是一种通过 CSS3 技术实现的网页轮播效果，与传统的2D轮播相比，它可以在网页中创建出更加生动和具有立体感的轮播效果。 CSS3 3D 轮播原理是利用 CSS3 的 transform 属性，通过给定元素的旋转和平移等变换参数，使其在3D空间中移动。通常情况下，我们可以通过 CSS3 的 translateZ() 函数来设置元素在z轴方向上的平移，从而使元素在3D空间中产生纵深的效果。 实现CSS3 3D 轮播，首先需要创建一个容器元素，然后将需要轮播的内容放置其中，通过 CSS3 3D 变换属性设置元素的初始位置和动画效果。可以利用 CSS3 的 transform 属性中的 rotateX(), rotateY() 和 translateZ() 函数来设置元素的旋转和平移效果，通过设置 transition 属性来产生动画效果，达到轮播的效果。 此外，还可以结合 JavaScript 来实现一些进阶功能，例如自动播放、手动控制等。通过 JavaScript，我们可以控制轮播容器的 transform 属性，以及监听用户的操作，实现自动轮播和手动控制。 总而言之，CSS3 3D 轮播是利用 CSS3 技术，通过设置元素的 3D 变换属性，以及动画效果实现的一种网页轮播效果，可以为网站带来更加生动和立体的展示效果。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

佳美不ERROR

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值