CSS3——3D变形 transform

流楚丶格念 2021-07-20 03:58:58
html css CSS3


3D变形(CSS3) transform

2d x y
3d x y z

左手坐标系

伸出左手,让拇指和食指成“L”形,大拇指向右,食指向上,中指指向前方。这样我们就建立了一个左手坐标系,拇指、食指和中指分别代表X、Y、Z轴的正方向。如下图
在这里插入图片描述
CSS3中的3D坐标系与上述的3D坐标系是有一定区别的,相当于其绕着X轴旋转了180度,如下图
在这里插入图片描述
简单记住他们的坐标:

x左边是负的,右边是正的

y 上面是负的, 下面是正的

z 里面是负的, 外面是正的

rotateX()

在这里插入图片描述
就是沿着 x 立体旋转.

img {
transition:all 0.5s ease 0s;
}
img:hove {
transform:rotateX(180deg);
}

rotateY()

沿着y轴进行旋转

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-09PWwZ0G-1594781930513)(media/1498446043198.png)]

img {
transition:all 0.5s ease 0s;
}
img:hove {
transform:rotateX(180deg);
}

rotateZ()

沿着z轴进行旋转

img {
transition:all .25s ease-in 0s;
}
img:hover {
/* transform:rotateX(180deg); */
/* transform:rotateY(180deg); */
/* transform:rotateZ(180deg); */
/* transform:rotateX(45deg) rotateY(180deg) rotateZ(90deg) skew(0,10deg); */
}

透视(perspective)

电脑显示屏是一个2D平面,图像之所以具有立体感(3D效果),其实只是一种视觉呈现,通过透视可以实现此目的。

透视可以将一个2D平面,在转换的过程当中,呈现3D效果。

  • 透视原理: 近大远小 。
  • 浏览器透视:把近大远小的所有图像,透视在屏幕上。
  • perspective:视距,表示视点距离屏幕的长短。视点,用于模拟透视效果时人眼的位置

注:并非任何情况下需要透视效果,根据开发需要进行设置。

perspective 一般作为一个属性,设置给父元素,作用于所有3D转换的子元素

理解透视距离原理:
在这里插入图片描述

translateX(x)

在这里插入图片描述
仅水平方向移动(X轴移动)

主要目的实现移动效果

translateY(y)

仅垂直方向移动(Y轴移动)
在这里插入图片描述

translateZ(z) ( 多做测试理解 )

transformZ的直观表现形式就是大小变化,实质是XY平面相对于视点的远近变化(说远近就一定会说到离什么参照物远或近,在这里参照物就是perspective属性)。比如设置了perspective为200px;那么transformZ的值越接近200,就是离的越近,看上去也就越大,超过200就看不到了,因为相当于跑到后脑勺去了,我相信你正常情况下,是看不到自己的后脑勺的。

translate3d(x,y,z)

其中,x和y可以是长度值,也可以是百分比,百分比是相对于其本身元素水平方向的宽度和垂直方向的高度和;z只能设置长度值

backface-visibility

backface-visibility 属性定义当元素不面向屏幕时是否可见。

案例1:旋转的轮播图

在这里插入图片描述

案例2:开门大吉

在这里插入图片描述
在这里插入图片描述

案例3:导航栏旋转

在这里插入图片描述

 

版权声明
本文为[流楚丶格念]所创,转载请带上原文链接,感谢
https://blog.51cto.com/u_15265965/2892249

  1. 微信小程序界面设计小程序中的WXSS(css)选择器课程-伪类-:disabled | :enabled 伪类
  2. 微信小程序界面设计小程序中的WXSS(css)选择器课程-伪类-:first-child 伪类
  3. 微信小程序界面设计小程序中的WXSS(css)选择器课程-伪类-:first-of-type 伪类
  4. 微信小程序界面设计小程序中的WXSS(css)选择器课程-伪类-:focus 伪类
  5. 微信小程序界面设计小程序中的WXSS(css)选择器课程-派生选择器
  6. 微信小程序界面设计小程序中的WXSS(css)选择器课程-伪类-:nth-child() 伪类
  7. 微信小程序界面设计小程序中的WXSS(css)选择器课程-选择器的分组
  8. HTML基础-简介
  9. ASP实战之HTML入门-黄菊华-专题视频课程
  10. 微信小程序WxParse解析富文本(html)代码在线视频教程
  11. HTML语言基础.上
  12. HTML语言基础.下
  13. HTML!
  14. 【网页前端设计Front end】HTML语言基础.上(看不懂你来打我)
  15. 【网页前端设计Front end】HTML语言基础.下(看不懂你来打我)
  16. 【django轻量级框架】HTML上传文件拦截到本地
  17. HTML5基础知识实战演练教程-黄菊华-专题视频课程
  18. 基于WEB的HTML5购物网站、H5电商购物平台网上商城网站毕业设计(1)商城首页
  19. 基于WEB的HTML5购物网站、H5电商购物平台网上商城网站毕业设计(2)商城分类
  20. 微信小程序框架weui的基础使用
  21. 一文入魂!彻底巩固你的Nginx知识体系!
  22. Nginx是什么?有哪些核心技术?
  23. Nginx配置如何一键生成
  24. 就这一次把网路的几种IO模型以及Nginx基本原理彻底搞清楚
  25. 优质高效,阿里性能怪兽宝典(Redis+Nginx)限时开源,手慢无!
  26. Nginx的配置文件nginx.conf配置解释
  27. 安装的nginx 地址重写
  28. nginx防盗链
  29. nginx动静分离
  30. nginx优化
  31. Nginx虚拟主机
  32. Nginx 反向代理
  33. IDEA实现热部署前端界面(Tomcat、IDEA)
  34. JavaScript中call与apply的区别
  35. JavaScript代码无分号问题
  36. 在Chrome浏览器中禁用JavaScript
  37. JavaScript为内置对象添加原型方法
  38. JavaScript原型数据共享与方法共享探究
  39. JavaScript把局部变量变成全局变量
  40. JavaScript函数自调用
  41. JavaScript继承的几种方法
  42. 逆向递归看JavaScript原型
  43. JavaScript函数进阶
  44. JavaScript中的call、apply、bind
  45. JavaScript高阶函数——函数当参数、返回值、其他成员
  46. JavaScript沙箱模式
  47. JavaScript闭包——点赞小案例
  48. JavaScript函数闭包
  49. JavaScript正则验证密码强弱度
  50. JavaScript表单信息验证案例——使用正则
  51. JavaScript伪数组和数组
  52. CSS代码书写规范
  53. jQuery——jQuery基本概念
  54. jQuery——jQuery选择器 ※
  55. jQuery——jQuery的CSS,class,属性操作及案例应用
  56. jQuery动画代码详解
  57. jQuery节点操作、弹幕案例
  58. jQuery事件机制
  59. jQuery链式编程,each方法,多库共存
  60. New open source project in July: can you keep up with the speed of building wheels at the front end?