前言

3D动画效果使页面看起来更加立体,图形更下加生动,实现原理是通过透视的视距,改变图像在人眼内成像的类型，从而达到图像立体的展示在人的眼前。

一、先来看几个动画案例

这几个动画案例均是由CSS 3D动画技术制成。大家知道javascript可以很轻松的实现动画效果
今天带大家不用js也实现一些简单的动画效果。

①旋转飞人

实现图片的翻转,可以自己制定旋转轴

②翻转纽扣

实现了两个盒子的前后翻转

③立体导航栏

实现了导航栏立体化

④立体轮播图

比普通的轮播图更加立体^_^

二、3D动画效果简述

3D动画效果展示只不过是对2D动画效果的延伸,2D动画进行定位、旋转、缩放的轴是
我们头部与电脑屏幕连线所在的直线,而3D动画效果可以自定义旋转轴。然后进行相应的操作。在3D旋转的时候有三个轴X、Y、Z（X是横向的、Y是竖向的、Z垂直与X、Y）1.以X轴旋转transform: rotateX(45deg);2.以Y轴旋转/* transform: rotateY(45deg); */3.以Z轴旋转（与2D的旋转没有本质的区别）transform: rotateZ(45deg);4.综合旋转(遵守规则：各个轴的矢量和)

1.转换类型： transform-style: preserve-3d;

这个属性的作用是告诉浏览器，以3D的形式对图片进行旋转。
这个属性一般是加在需要进行变换的盒子上
以下通过翻转纽扣进行体会：

代码如下：

<!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>body {/*可以修改该属性，达到纽扣的不同效果的展示。*/perspective: 400px;}.root {position: relative;width: 300px;height: 300px;margin: 100px auto;}.root:hover .box {transform: rotateY(180deg);}.box {position: relative;width: 100%;height: 100%;transition: all 2s;transform-style: preserve-3d;}.nav,.qwe {position: absolute;top: 0;left: 0;width: 100%;height: 100%;border-radius: 50%;text-align: center;line-height: 300px;font-size: 45px;font-family: '幼圆';font-weight: 700;color: #fff;transition: all 2s;}.nav {background-color: cadetblue;z-index: 1;}.qwe {background-color: cornflowerblue;transform: rotateY(180deg);}</style>
</head><body><div class="root"><div class="box"><div class="nav">Hello</div><div class="qwe">World</div></div></div></body></html>

2.透视 perspective: 400px;（拉进我们眼睛与图像的距离）

这里指物理距离不变,改变的是展示的效果（就像在平时观察真实的物
体走近了几步,观察的角度改变了）
这个属性一般加在需要变换盒子的父盒子上。
以下使用翻转飞人案例进行代码展示
修改透视距离为100px会看到飞人踢你。（嘿嘿）

代码如下：

<!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>body {perspective: 400px;/* 保持三D效果 */transform-style: preserve-3d;}div {margin: 200px auto;width: 300px;height: 300px;background: url(../3.gif);background-size: 100% 100%;transition: all 2s;}div:hover {transform: rotate3d(1, 1, 1, 360deg);}</style><style></style>
</head><body><div></div>
</body></html>

三、项目案例代码

1.立体导航栏

 这个的实现过程就是将盒子通过x轴进行旋转,直到与电脑屏幕垂直,然后添加一个新的盒子,与第一个盒子垂直,在鼠标聚焦在第二个盒子上的时候盒子进行90度旋转

<!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><!-- 立体导航栏刚开始都在z轴的0处,沿z轴所在的平面进行旋转,旋转轴是x轴视距会影响标签的显示效果,所以一般将视距与transform-style加在3D标签的父标签--><style>.navrootr {float: left;position: relative;width: 100px;height: 40px;margin: 100px 10px;perspective: 400px;}.navrootr:hover .navroot {transform: rotateX(90deg);}.navroot {position: relative;width: 100%;height: 100%;/* perspective: 400px; */transform-style: preserve-3d;transition: all .4s;}.box1,.box2 {color: #fff;position: absolute;width: 100%;height: 100%;text-align: center;line-height: 40px;}.box1 {transform: translateZ(50%);background-color: teal;transform: translateZ(20px);}.box2 {background-color: cornflowerblue;transform: translateY(20px) rotateX(-90deg);}</style>
</head><body><div class="navrootr"><div class="navroot"><div class="box1">哔哩哔哩</div><div class="box2">百度知道</div></div></div><div class="navrootr"><div class="navroot"><div class="box1">哔哩哔哩</div><div class="box2">百度知道</div></div></div><div class="navrootr"><div class="navroot"><div class="box1">哔哩哔哩</div><div class="box2">百度知道</div></div></div><div class="navrootr"><div class="navroot"><div class="box1">哔哩哔哩</div><div class="box2">百度知道</div></div></div><div class="navrootr"><div class="navroot"><div class="box1">哔哩哔哩</div><div class="box2">百度知道</div></div></div><div class="navrootr"><div class="navroot"><div class="box1">哔哩哔哩</div><div class="box2">百度知道</div></div></div></body></html>

2.旋转木马

添加了6个盒子,中间一个,将每一个图片按照第一个图片先旋转,再平移
【例如translateZ(350px),沿z轴平移350px】,可以在纸上先画一个俯视图,
看看每一个图片具体旋转多少度,移动多少可以达到固定的位置。

<!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><!-- 在进行3D视角的页面布局时,应优先调整角度,再移动距离--><style>@keyframes run {0% {transform: rotateY(0);}100% {transform: rotateY(360deg);}}.bodyroot {perspective: 1000px;}section {position: relative;width: 350px;height: 200px;background: url(../IMG_1770\(20210111-231055\).JPG) no-repeat;background-size: 100% 100%;margin: 200px auto;transform-style: preserve-3d;animation: run 6s linear infinite;}section:hover {animation-play-state: paused;}section div {position: absolute;top: 0px;left: 0px;width: 300px;height: 200px;background: url(../dog.jpg) no-repeat;}/* 前 */section div:nth-child(1) {transform: translateZ(350px);background: url(../q.jpg) no-repeat;background-size: 100% 100%;}/* 后 */section div:nth-child(2) {transform: rotateY(60deg) translateZ(350px);background: url(../w.jpg) no-repeat;background-size: 100% 100%;}/* 前左 */section div:nth-child(3) {transform: rotateY(120deg) translateZ(350px);background: url(../e.jpg) no-repeat;background-size: 100% 100%;}/* 前右 */section div:nth-child(4) {transform: rotateY(180deg) translateZ(350px);background: url(../r.jpg) no-repeat;background-size: 100% 100%;}/* 后左 */section div:nth-child(5) {transform: rotateY(240deg) translateZ(350px);background: url(../t.jpg) no-repeat;background-size: 100% 100%;}/* 后右 */section div:nth-child(6) {transform: rotateY(300deg) translateZ(350px);background: url(../y.jpg) no-repeat;background-size: 100% 100%;}</style>
</head><body><div class="bodyroot"><section><div></div><div></div><div></div><div></div><div></div><div></div></section>   </div>
</body></html>

总结

以上的案例将图片路径替换成你的图片所在的路径就可以直接运行,对于3D动画效果,整不清楚就画图,可以先局部后整体。

一文搞懂CSS 3D动画效果相关推荐

一文搞懂css 2D动画效果
文章目录前言一.过渡动画效果简述 transition: 1.代码示例 2.效果展示二.定位translate 1.2D定位 transform: translate(50%, 50%); ①. ...
「CSS 3D 专题」搞懂 CSS 3D，你必须理解 perspective（视域）这个属性
关注前端达人,与你共同进步开篇上一章节<学习前,你需要了解什么是CSS 3D?>里,我们一起了解什么是CSS 3D,本篇章节笔者将带着大家学习 perspective(视域)这个重要属 ...
html5 css 3d动画效果代码,css3D+动画的例子（附完整代码）
本篇文章给大家带来的内容是关于css3D+动画的例子(附完整代码),有一定的参考价值,有需要的朋友可以参考一下,希望对你有所帮助. 前言最近玩了玩用css来构建3D效果,写了几个demo,所以博客总 ...
html 字号和像素的关系,一文搞懂CSS中的字体单位大小(px,em,rem...)
在学习的过程中,发现CSS有很多可以形容单位的尺寸.比方px,em,rem,vw等等.平常也没有深究,一来是没时间,二来是在我学习清单中优先级过低.一直想彻底弄明白,一直耽搁到现在.现在花上一点时间来 ...
【精选】一文搞懂css三大特性
文章目录前言一.css的三大特性都有什么? 二.盒子模型 1.盒子属性 ①盒子边框border ②盒子边角border-radius ③盒子阴影 box-shadow 2.内边距padding 3 ...
一文搞懂css中精灵图如何使用
文章目录前言一.精灵图是什么? 1.概念: 2.图片示例: 二.为什么使用精灵图? 1.用户体验而言: 2.就开发者而言: 3.就服务器而言: 三.怎样使用精灵图 1.background-pos ...
css股票曲线图图解,如何看懂股票曲线图，一文搞懂这些曲线所代表的含义！
原标题:如何看懂股票曲线图,一文搞懂这些曲线所代表的含义! 在股票技术分析中,我们经常要分析K线图,分时图等等,有些新手在入门的时候常常把两者弄混,所以统称它们为曲线图,实际它们就是K线图和分时图了, ...
一文搞懂 Cocos Creator 3.0 坐标转换原理
一文搞懂 Cocos Creator 3.0 坐标转换原理屏幕坐标 UI 触点坐标 UI 多分辨率适配方案 UI 触点获取不同坐标之间的转换屏幕坐标与 3D 节点世界坐标互转 3D 节点之间的坐 ...
【UE·蓝图底层篇】一文搞懂NativeClass、GeneratedClass、BlueprintClass、ParentClass
本文将对蓝图类UBlueprint的几个UClass成员变量NativeClass.GeneratedClass.BlueprintClass.ParentClass进行比较深入的讲解,看完之后对蓝图 ...
一文搞懂Qt中的颜色渐变(QGradient Class)
一文搞懂Qt中的颜色渐变(QGradient Class) 1, 快速开始! Qt中与颜色渐变有关的类是QGradient 其中它又有三个子类:QLinearGradient.QRadialGradi ...

一文搞懂CSS 3D动画效果

文章目录

前言

一、先来看几个动画案例

①旋转飞人

②翻转纽扣

③立体导航栏

④立体轮播图

二、3D动画效果简述

1.转换类型： transform-style: preserve-3d;

2.透视 perspective: 400px;（拉进我们眼睛与图像的距离）

三、项目案例代码

1.立体导航栏

2.旋转木马

总结

一文搞懂CSS 3D动画效果相关推荐

最新文章

热门文章