前言：可以配合我上一期博客（过渡与动画）一起看CSS3之过渡与动画 https://blog.csdn.net/weixin_45707229/article/details/125642353

2D转换 transform

位移translate

translate(x轴, y轴); 一个不能少（某个方向不想移动就写0 ），可以是百分比，百分比单位是相对于自身元素的，px单位相对于父元素
translateX(xxpx); 沿X轴移动，也可以是百分比，百分比单位是相对于自身元素的，px单位相对于父元素
translateY(xxpx); 沿Y轴移动，也可以是百分比，百分比单位是相对于自身元素的，px单位相对于父元素

重点：

不会影响其他元素的位置，上面在移动，下面的标准流不变

对行内标签没有效果（a、span等）

例：

可以配合定位，实现子元素在父元素垂直居中的效果(子绝父相，子top:50%,left:50%,transform: translate(-50%,-50%);实现居中于父元素)

<style>.box1{position: relative;width: 200px;height: 100px;transform: translate(10%,10%);background-color: pink;}.box2{position: absolute;top: 50%;left: 50%;width: 50px;height: 25px;background-color: skyblue;transform: translate(-50%,-50%);}</style><div class="box1"><div class="box2"></div></div>

旋转rotate

transform: rotate(xx deg); deg是度角度，旋转的度数

例：配合过渡，实现鼠标悬停时，旋转360度一圈

<style>img{border: 3px solid black;border-radius: 50%;transition: all 0.5s;}img:hover{transform: rotate(360deg);}
</style>
<img src="../SHOPING/favicon.ico" >

转换的起点transform-origin

可以作为旋转点

transform-origin: x y （x和y用空格隔开）

x和y可以是 xxpx xxpx 或 xx% xx% 或 left/right/top/bottom/center left/right/top/bottom/center

默认是50% 50% 也就是中心点

例：以左下角为旋转点旋转

<style>.origin{overflow: hidden;width: 100px;height: 100px;margin: 10px auto;border: 1px solid gray;transform-origin: left top;}.origin::before{content: "xxx";display: block;width: 100%;height: 100%;background-color: pink;transform: rotate(90deg);transform-origin: left bottom;transition: all 0.3s;}.origin:hover::before{transform: rotate(0deg);}</style><div class="origin"></div>

缩放scale

transform: scale(x,y) 没有单位，直接写倍数。宽度扩展为x倍，高度扩大为原来y倍，
1默认不变；
2扩大2倍；
0.5缩小原来一半

transform: scale(x) 宽高一起变x倍大小

缩放后原位置不变，不影响其他标准流

例：鼠标悬停在头像上时放大

<style>img{border: 3px solid black;border-radius: 50%;transition: all 0.5s;}#avatar{line-height: 70px;transition: all 0.3s;}#avatar:hover{transform: scale(1.1);}
</style><img id="avatar" src="../SHOPING/favicon.ico">

2D转换的复合写法

transform: translate(x,y) rotate(xx deg) scale(x,y) … 等

顺序会影响转换的效果。（先旋转会改变坐标轴方向）

同时有位移和其他属性时，记得把位移放最前面

3D转换

坐标轴

位移 translate3d

transform: translateX( …px) 仅在x轴上移动
transform: translateY( …px) 仅在y轴上移动
transform: translateZ( …px) 仅在z轴上移动
transform: translate3d(x,y,z) xyz分别指要移动的轴的方向的距离，一个都不能少写。

透视 perspective

perspective 给父元素添加，单位px，值越大，离屏幕越远，子元素越小。

由此能实现近大远小 的效果

旋转 rotated3d

rotateX( …deg) 正数沿x轴顺时针旋转，负数逆时针
rotateY( …deg) 正数沿y轴顺时针旋转，负数逆时针
rotateZ( …deg) 正数沿z轴顺时针旋转，负数逆时针
rotate3d(x,y,z,xxdeg) （了解）
可以自定义旋转轴，rotate3d(1,1,0,30deg) 表示沿着x轴和y轴中间的轴即对角线旋转30度。

例：结合动画，进行3d旋转

<style>body{perspective: 500px;}img{display: block;margin: 50px auto;border: 5px solid black;animation: xxx 2s linear infinite;}@keyframes xxx {0%{ }25%{transform: rotateX(30deg)}50%{transform: rotateX(30deg) rotateY(30deg)
/*rotateX(30deg)是保持上面那个x轴的旋转状态，而不是在x轴累加再旋转30度*/ }75%{               transform: rotateX(30deg)  rotateY(30deg)  rotateZ(30deg)
/*同理，rotateX(30deg)和rotateY(30deg)是保持上面那的旋转状态，不是累加*/ }100%{transform: rotateX(0deg)  rotateY(0deg)  rotateZ(0deg)}}</style><img src="./GuangDong.jpg">

开启三维立体环境

控制子元素是否开启三维立体环境

transform-style 默认 flat 不开启立体空间

transform-style: preserve-3d 子元素开启立体空间

代码写给父级，但是影响的是子盒子

综合案例：魔方

<style> body{perspective: 500px;}@keyframes upsidedown {0%{}25%{transform: rotateY(221deg)  rotateX(344deg) rotateZ(34deg);}50%{transform: rotateY(44deg)  rotateX(12deg) rotateZ(62deg);}75%{transform: rotateY(123deg)  rotateX(64deg) rotateZ(17deg);}100%{transform: rotateY(22deg)  rotateX(90deg) rotateZ(202deg);}}.box{position: relative;width: 100px;height: 100px;transform-style: preserve-3d;   /*   让子盒子保持三维立体  */margin: 200px auto;animation: upsidedown 3s ease-in-out 0.2s infinite alternate;}.top,.left,.front,.back,.right,.bottom{position: absolute;width: 100%;height: 100%;}.top{background-color: red;transform: translateY(-50%) rotateX(90deg);}.left{background-color: blue;transform: translateX(-50%)  rotateY(90deg);}.front{background-color: white;text-align: center;line-height: 100px;transform:  translateZ(50px);}.back{background-color: yellow;transform: translateZ(-50px);}.right{background-color: green;transform: translateX(50%) rotateY(90deg);}.bottom{background-color: orange;transform: translateY(50%) rotateX(90deg);}
</style><div class="box"><div class="top"></div><div class="left"></div><div class="front">魔方</div><div class="back"></div><div class="right"></div><div class="bottom"></div></div>

效果：

CSS3之2D转换、3D转换相关推荐

CSS3之2D与3D转换
在CSS3中新增了很多关于2D和3D转换的标准,它允许将页面元素在2D和3D空间内进行移动.缩放.旋转.倾斜等.所谓的2D转换,指的是元素可以在平面内进行位置或形状的转换,而3D转换指的是元素可以在三 ...
html52D转换3D,CSS3 Transform 2D和3D转换
1.2 缩放语法transform : scale(x,y); -webkit-transform : scale(x,y); 根据倍数来缩放,取决于宽度(X轴)和高度(Y轴)的参数:也可以用一个参 ...
CSS3 2D和3D转换 Transform
Transform 适应于对任一DOM元素的2D或3D转换,这些转换效果有:旋转(rotate).拉伸(scale).平移(move).倾斜(skew)等,利用Transform和javascript ...
【css3文字阴影+盒子阴影+过渡+2d转换+3d转换】
文字阴影text-shadow text-shadow 后面的值有4个: 第一个:X轴,水平阴影位置允许负值. 第二个:y轴,垂直阴影位置,允许负值. 第三个:blur, 模糊的距离第 ...
保姆级解读！CSS属性transform变形+2D转换+3D转换实例+代码+解析——Web前端系列学习笔记
文章目录 transfrom 2D转换案例代码效果图元素变形原点 3D转换 3D转换--案例案例代码 transfrom transform,翻译成中文的含义是"改变,使-变形:转换 ...
论文翻译——Rapid 2D-to-3D conversion——快速2D到3D转换
目前想做一个关于2D转3D的项目,由于国内资料比较少而且大部分都是基于国外的研究资料优化而来,所以想翻译翻译国外的论文,强化自己的理解,同时方便他人,英文水平有限,尽量做到"信达雅" ...
CSS学习笔记 07、2D与3D转换
文章目录前言一.2D变形 1.1.旋转变形 transform: rotate(度数)-旋转角度,默认中心点旋转 transform-origin属性(定义旋转点) 1.2.缩放变形 transf ...
CSS3中的2D和3D转换知识介绍
一 2D转换转换是CSS3中具有颠覆性的特征之一,可以实现元素的位移.旋转.变形.缩放,甚至支持矩阵方式,配合即将学习的过渡和动画知识,可以取代大量之前只能靠Flash才可以实现的效果. 1.移动 ...
CSS3 2D转换3D转换
1.transform属性方法 Transform 方法 2.2D转换 translate()方法 .div1 {width: 100px;height: 100px;background: #00f ...
css3中的2D和3D转换、动画效果以及布局
文章目录一.2D转换: 1. 2D移动:translate().使用translate()函数,你可以把元素从原来的位置移动.移动参照元素左上角原点 2. 2D缩放: 3. 2D旋转: 4. 2D翻 ...

CSS3之2D转换、3D转换