CSS3——2D、3D转换

最新推荐文章于 2024-05-12 11:58:43 发布

Alice__97

最新推荐文章于 2024-05-12 11:58:43 发布

阅读量427

点赞数

分类专栏：前端 CSS 文章标签： CSS3 2D变换 3D变换

本文链接：https://blog.csdn.net/Alice__97/article/details/93773879

版权

前端同时被 2 个专栏收录

12 篇文章 0 订阅

订阅专栏

CSS

10 篇文章 0 订阅

订阅专栏

1、2D转换方法：对元素进行旋转、缩放、移动、拉伸

transform属性：

rotate(度数deg)——度数为正值，顺时针旋转；度数为负值，逆时针旋转
scale(x,y)——x为水平方向缩放倍数，y为垂直方向缩放倍数，若省略，同x；0~1缩小，>1放大

div{
	transform: rotate(10deg);
}
		
img:hover{
	transform: scale(1.2);
}

2、3D变换

transform-style：preserve-3d——设置为3D变换
transform属性（旋转）——rotateX() ，rotateY() ，rotateZ()分别沿着X，Y，Z旋转，单位为deg（度数）
prepective属性——设置透视效果，近大远小，3D转换必须要设置此属性

3D变换通常将内容包裹在一个父容器中，而父容器在舞台中

父容器设置旋转，设置transform-style属性和tranform：rotate属性
舞台设置透视关系，perspective：100px；即眼睛到舞台的距离为100像素，值越大，看得越不明显

<!DOCTYPE html>
<html>
<head>
	<style type="text/css">
		.stage{
			height: 120px;
			margin: 100px auto;
			perspective: 100px;
		}
		.div{
			height: 80px;
			width: 120px;
			border: 1px solid red;
			float: left;
			transform-style: preserve-3d;
		}
		img{
			height: 80px;
			width: 120px;
		}
		.x:hover{
			transform: rotateX(30deg);
		}
		.y:hover{
			transform: rotateY(30deg);
		}
		.z:hover{
			transform: rotateZ(30deg);
		}

	</style>
</head>
<body>
	<div class="stage">
		<div class="div x"><img src="snow.jpg"></div>
		<div class="div y"><img src="snow.jpg"></div>
		<div class="div z"><img src="snow.jpg"></div>
	</div>
	
</body>
</html>

Alice__97

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
CSS3——2D、3D转换

1、2D转换方法：对元素进行旋转、缩放、移动、拉伸transform属性：rotate(度数deg)——度数为正值，顺时针旋转；度数为负值，逆时针旋转 scale(x,y)——x为水平方向缩放倍数，y为垂直方向缩放倍数，若省略，同x；0~1缩小，>1放大div{ transform: rotate(10deg);} img:hover{ transform: sca...
复制链接

扫一扫

专栏目录