【前端学习】CSS3 3D

文章目录

• ·translateZ
• ·transform-style: perserve-3d
• ·scaleZ
• ·backface-vicibility
• ·改变旋转轴中心

x: 正方向向右， y: 正方向向下， z: 垂直于屏幕

·translateZ

只给元素添加translateZ没有任何效果，需给父元素添加perspective: …px（景深）。

#box {
	width: 200px;
	height: 200px;
	border: 1px solid black;
	perspective: 120px;
}
img {
	transform: translateZ(100px);
}

·transform-style: perserve-3d

需给父元素添加transform-style: perserve-3d，让子元素保留3d效果。

·scaleZ

在Z轴方向缩放，表示厚度
给一个平面元素添加scaleZ是没有意义的

·backface-vicibility

图片背面是否可见属性，默认可见
backface-vicibility: hidden 图片背面不可见

·改变旋转轴中心

transform-origin: 接受两个参数
可以是单词法
可以是像素法
可以百分比
默认是 50% 50%

/*改变旋转中心为左上角*/
img {
	transform-origin: left top;
	transform: rotateZ(45deg);
}

/*改变旋转轴中心到 50px 50px的位置*/
img {	
	transform-origin: 50px 50px;
	transform: rotateZ(45deg);
}

/*改变旋转轴中心到右侧中间部分*/
img {
	transform-origin: 100% 50%;
	transform: rotateZ(45deg);
}

来源：CSDN

作者：Dog Sun

链接：https://blog.csdn.net/weixin_44796493/article/details/104346841