3D变形(CSS3)transform-旋转

最新推荐文章于 2024-10-08 18:21:13 发布

纯情小码哥

最新推荐文章于 2024-10-08 18:21:13 发布

阅读量245

点赞数

分类专栏： CSS 文章标签： 3D变形(CSS3)transform-旋转

本文链接：https://blog.csdn.net/Liyunhao_haoge/article/details/102646338

版权

CSS 专栏收录该内容

58 篇文章 1 订阅

订阅专栏

3D变形(CSS3)transform-旋转
坐标：
X左边是负的，右边是正的
Y上面是负的，下面是正的
Z里面是负的，外面是正的

3D旋转
transform: rotateX()|rotateY()|rotateZ()

代码如下：

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>

	<style type="text/css">
	div:first-child{
		width: 100px;
		height: 100px;
		background-color: green;
	}
	div:nth-child(2) {
		width: 100px;
		height: 100px;
		background-color: pink;	
		transition: all 3s; /*过渡*/
	}	

	div:nth-child(3) {
		width: 100px;
		height: 100px;
		background-color: red;	
		transition: all 3s; /*过渡*/
	}
	div:nth-child(4) {
		width: 100px;
		height: 100px;
		background-color: yellow;	
		transition: all 3s; /*过渡*/
	}
	div:hover:nth-child(2){
		transform: rotateX(30deg);
	}
	div:hover:nth-child(3){
		transform: rotateY(30deg);	
	}
	div:hover:nth-child(4){
		transform: rotateZ(30deg);	
	}		
	</style>
</head>
<body>
	<div>原图</div>
	<div>3D-X</div>
	<div>3D-Y</div>
	<div>3D-Z</div>		
</body>
</html>

效果如下：