CSS3 3D转换

最新推荐文章于 2022-12-23 13:13:28 发布
VIP文章 最新推荐文章于 2022-12-23 13:13:28 发布
阅读量121 收藏
点赞数
分类专栏： CSS3
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_43522998/article/details/114947930
版权

目录
3D 特点
3D 空间坐标图
3D 位移
3D 旋转
透视
呈现

我们生活的环境就是3D的，而照片就是3D物体在2D平面呈现的例子。

3D的特点
首先我们来了解3D的特点。
  • 远大近小
  • 物体被遮挡不可见

当我们在网页上构建3D效果时参照这些特点就可以产出3D效果

3D 空间坐标图
其次，在CSS中，我们还需要了解对应空间坐标轴，明确了三条坐标的正负方向有利于接下来的学习。

在这里插入图片描述
如上图，可知

  • 向右为x正方向，向左为负
  • 向下为y正方向，向上为负
  • 直视于屏幕，由屏幕向眼睛为z正方向。
3D 位移 translate3d
3D移动在2D移动基础上多加了一个可以移动的方向，就是Z轴。

语法：

transform：translateX
最低0.47元/天 解锁文章
Continue丶
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
HTML5CSS3 3D环形图片墙 伴随旋转动画
11-03
HTML5 CSS3 3D环形图片墙 伴随旋转动画 HTML5CSS3 3D环形图片墙 伴随旋转动画
CSS3基础之3D转换
m0_61794291的博客
03-24 788
文章目录1. 三维坐标系2. 3D位移translate3d3. 透视perspective3.1`translateZ`4. 3D旋转`rotate3d`5. 3D呈现`transform-style` 1. 三维坐标系 三维坐标系其实就是指立体空间，立体空间是由3个轴共同组成的 x轴： 水平向右 注意： x 右边是正值，左边是负值 y轴： 垂直向下 注意： y 下面是正值，上面是负值 z轴： 垂直屏幕 注意： 往外面是正值，往里面是负值 tips： 3D 转换我们主要学习工作中最常用的3
CSS3 3D 转换
qq_39579087的博客
09-05 313
3D转换 当我们直接设置translate-z时并不会看见效果，要借助透视。 透视 translatZ 旋转 x轴正向旋转： y轴正向旋转： z轴的旋转就和转盘一样 transform-style 如果想父元素旋转时子元素也跟着旋转，就要用到这个。 案例 两面翻转的盒子 <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, ini
css3 3D转换
qq_60471941的博客
02-07 539
3D转换 透视perspective 让网页中产生3D效果，就需要添加透视，让2D平面产生近大远小的效果。 透视也被称为视距：人的眼睛到屏幕的距离； 距离视距点越近的物体，成像就越大，相应的，距离视距点越远的物体，成像就越小。 透视的单位是像素。 透视要写在被观察元素的父盒子上。 物体的z轴是物体距离屏幕的距离，z轴为正值时物体从屏幕里跑出来，反之就进去。 而当物体从屏幕里跑出，靠近视距点时就里视距点近，变大。反之远离时就变小； 3D移动translate3d（x，y，z） 与2
利用HTML5+CSS3实现3D转换效果实例详解
09-24
对于css的二维世界，相信大家都不陌生。在二维的世界里，我们可以对元素设置宽高、位置、旋转、背景等等。...下面这篇文章主要给大家介绍了利用HTML5+CSS3实现3D转换效果的相关资料，需要的朋友可以参考。
CSS3 2D 转换
12-13
CSS3 2D 转换 #rotate2D,#rotate3D { width:80px; height:70px; color:white; position:relative; font-weight:bold; font-size:15px; padding:10px; float:left; margin-right:50px; border-radius:5px; border:1...
ssc:一个 CSS 3D 转换库
07-04
CSS 3D 转换库。 例子 ssc ( '#test' ) . translate ( 42 , 69 , 99 ) . rotate ( [ 0 , 0 , 1 ] , Math . PI / 4 ) . scale ( 2 , 2 ) . changeOrigin ( 'bottom right' ) . apply ( ) ; 应用程序接口 ssc( ...
3D-css-transform.zip
09-17
3D-css-transform.zip,css转换操场。可视化二维和三维css3转换功能的在线工具。,3D建模使用专门的软件来创建物理对象的数字模型。它是3D计算机图形的一个方面，用于视频游戏，3D打印和VR，以及其他应用程序。
Css3 3D转换
m0_51495354的博客
11-30 744
Css3 3D转换
CSS3 3D转换
Mia的博客
02-10 162
特点 近大远小 物体后面遮挡不可见 三维坐标系 x,y,z 三个值 z 越往外面越大 越往里面越小 后面的单位一般用px perspective透视也叫视距 如果想要在网页产生3D效果需要透视（理解成3D物体投影在2D平面内） 模拟人类的视觉位置，可认为安排一只眼睛去看 透视越大，距离屏幕越近，成像越大。透视越小，距离屏幕越远，成像越小 透视的单位的像素 透视写在被观察的元素的父亲里面 **透...
CSS3的3D转换
JJ_Smilewang的博客
04-15 1074
本文主要介绍了CSS3中3D位移和3D旋转的相关知识点，以及如何在二维平面上呈现出3D立体效果。
CSS3之3D转换
LQlove1的博客
12-23 1803
3D移动在2D移动的基础上多加了一个可以移动的方向，就是z轴方向。内容里有旋转木马的案例
css transform3d
最新发布
08-30
- *1* *2* [CSS3的transform之3d转换、CSS3动画](https://blog.csdn.net/m0_46324704/article/details/125860882)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_...

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值