css之3D旋转讲解

3D动画
3d动画不同于2d动画，它是立体空间，三维的；
目的：如何在网站中实现立体效果；
1.建立立体思维方式；
2.找到坐标原点，以及x,y,z轴；
x轴：是指网站的水平方向； y轴：网站的竖直方向，往右值越大；z轴：看不见的虚拟空间，越往里，越虚拟，值越大；
原点：以元素为基准，默认位置，视图窗口左上角；
（3d视图：近大远小。这里的x轴和数学中的没有区别，但是y轴的方向与数学中的y轴是相反的，越往下值越大）
3.根据属性沿着轴进行抽象样式
注意:3d动画的 x ，y ， z 轴不是在浏览器上的，而是在元素本身上的，会随着元素的转动而转动；
那么问题来了，2d ， 3d 都有轴，那么轴在哪？
3d的轴在元素自身上，而2d的轴则是以页面为标准。
当元素发生旋转时，坐标轴也会发生变化，但是原心不变；

2D和3D属性使用的不同点
2D函数在使用时不用添加 x， y ，z；
例如：translate（x，y） rotate（x，y）
而3D在使用的时候不一样：
例如：translateX,Y,Z()，rotateX,Y,Z();

语法上的区别：
2d可以直接使用属性；
3d由于是立体的，想要看到效果，需要在body中加上：perspective：1000px；（景深效果）；
注：如若一个项目为3d，最好所有的元素都设置为3d。

理解难点，重点：
1.
2d是水平面，常用；
3d整体思维是与2d不同的，在做3d的时候，忘记平面，才能考虑立体；
2.
3d旋转后，轴方向会发生变化，轴指向也会发生变化，但是原点不变；
2d旋转后轴方向也会发生变化，同样是它的原点也不会发生变化；
3d更加抽象；需要站在不同的角度去思考问题；

写3d的个人思路：
1.先试用手稿画出3d空间立体样式；
2.不论有多少块，先让位置统一，然后在移动位置；
3.逐个进行3d的旋转，平移处理；
4.旋转角度：这个是可以算出来的，平移的位置距离需要自己来调试；
注意：复杂的立体空间：大房子里面有个小柜子，小柜子里面有小盒子；摆放盒子在柜子中的位置，摆放柜子在房子中的位置；

css之3D旋转讲解相关推荐

HTML+CSS制作3D旋转相册
一.HTML+CSS制作3D旋转相册哈哈哈,放寒假啦!又可以好好闭关修炼了,最近,在抽屉里无意中翻到了自己上小学时的照片,太可爱啦,照片我就不贴出来了,于是,我就想着用所学的知识,做一个3D旋转相册 ...
css动画-3d旋转盒子
css动画-3d旋转盒子效果图: 思路: 1.一个容器,装6个子容器放6张图(我是采用的ul列表) <ul class="container"><li id=& ...
纯CSS制作3D旋转风车动画效果
效果图展示 HTML源码: <!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"&g ...
【css实现3D旋转卡片】
提示:话不多说直接上代码前言实现效果如下一.html代码 <!DOCTYPE html> <html><head><meta http-equiv=&q ...
基于CSS的3D旋转画册的制作
需要注意的点: 1.首先是image的整理,以个人实际开发经验来看,方方正正的照片做出来的效果比较好 2.其次是在html中的盒子的大小和尺寸的构建,以实际情况看自己需要放几张照片来调整盒子的大小(一 ...
CSS 制作3D旋转视频
<!doctype html> <html lang="en"> <head><meta charset="UTF-8" ...
html中3d哪个方向是x轴,详解用CSS绘制3D旋转立方体
CSS3D旋转立方体绝对是能充分代表这些年CSS发展新高度的典型案例.从一种只是简单的颜色和尺寸渲染的标记符,CSS现在已经变成了一种能够创造出复杂的.具有艺术感染力的视觉效果的编程语言.动画效果的生 ...
html+css制作3D旋转正方体特效
制作方法: html部分: 连接css 定义大盒子放入想要的图片(此处我直接在放入图片时直接定义了图片的大小,并不规范) css部分: 首先设置盒子的属性,其中transform-style:pres ...
【Html+CSS】3D旋转相册
3D旋转木马相册 & 3D盒子相册因为代码大部分相同,就放一起了注释一下就是另一个相册 <!DOCTYPE html> <html lang="en" ...
css 文字 3d旋转动画,CSS3 简单的三维文字旋转动画
CSS 语言: CSSSCSS 确定 *, *:after, *:before { box-sizing: border-box; } html { height: 100vh; background ...

css之3D旋转讲解

css之3D旋转讲解相关推荐

最新文章

热门文章