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 ...
最新文章
- 整合Flex和Java(中)
- R语言构建生存分析(survival analysis)模型示例
- ClickHouse系列教程
- ELK环境搭建及client配置
- c++创建单级目录 多级目录,判断是否存在
- 实现不同vlan间PC不可互访,而不同vlan的PC均可访问服务器的特殊效果,(华为)...
- 学编程的不能不看的好文章
- 写在08年“愚人节”
- 9篇!悉尼科技大学入选CVPR2021都研究什么?
- 数据结构之内部排序一
- CAAnimation KeyPath学习总结
- java项目计算器关键思路_JAVA项目实战(计算器)
- 新春活动策划案例(共31份)
- 卸载网易邮箱大师邮件从服务器删除,如何卸载网易邮箱大师 网易邮箱大师卸载教程...
- vue中清除浏览器缓存得方法
- lq到底是什么意思_LQ网络用语是什么意思?
- 项目管理考PMP真的有用吗?
- 刹车刹不住,太危险?我在绿源杭州电动车店提的新车超稳哒~
- 本地计算机架设http服务器,多维互联网(在本地电脑上架设web服务器软件)
- 《Spring Cloud微服务架构实战派》PDF样章