3d转化

3d转化
3d视距
perspective: 1000px;
加在body:下面所有子元素,形成统一的透视感;
加在各自父亲上:管理下面的子元素形成各自的透视感;
值越小,变化越剧烈;
3d位移
transform: translateX(200px);
transform: translateY(100%);
设置百分比移动的是自身的百分之多少
transform: translateZ(100px);
Z轴没有厚度,设置%不生效
简写
transform: translate3d(100px, 100px, 100px);
3D呈现
transform-style: preserve-3d;
父元素控制子元素是否开启三维立体环境,让子元素做3D转换能有效果;
只要亲生子元素做3D转换,就需要在其父亲上加3D呈现,这样子元素做的3D转换才能被看到
在父亲上加3d呈现
亲生子元素做3D转化,可呈现出来
视距
近大远小,透视感;
body所有的子元素、各自父亲;观测角度不同;
3D呈现
亲生子元素3D转化,可呈现出来
父亲上加;
3d旋转
transform: rotateX(45deg);
transform: rotateY(45deg);
transform: rotateZ(45deg);
自定义轴线
transform: rotate3d(1, 1, 0, 45deg);
左手工具
左手的拇指指向 某一 轴的正方向;
其余手指的弯曲方向就是该元素 绕着 某一 轴旋转的方向 为顺时针正方向
想方便的观测到如何旋转,要把轴向指向你的眼睛。
3d缩放
transform: scaleX(2);
transform: scaleY(0.5);
Z轴方向没有厚度,不生效
transform: scaleZ(10000);
简写
transform: scale3d(2, 2, 10000000);
3D缩放,相对于自身宽高厚,Z轴缩放不生效,因为没有厚度;
下面子元素、文字、设置CSS属性都会跟着缩放;
3d简写
transform: translateY() rotateX();
注意:旋转会改变轴向,会影响代码的书写;

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值