CSS3快速上手之13：3D效果

最新推荐文章于 2024-05-19 09:50:05 发布

Owen的Blog

最新推荐文章于 2024-05-19 09:50:05 发布

阅读量299

点赞数

分类专栏： HTML CSS

本文链接：https://blog.csdn.net/u011775523/article/details/52781631

版权

HTML 同时被 2 个专栏收录

45 篇文章 0 订阅

订阅专栏

CSS

22 篇文章 0 订阅

订阅专栏

1.代码：

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> 
<title>网页title</title> 
<style> 
div
{
	width:200px;
	height:100px;
	background-color:red;
	border:1px solid black;
}

div#div1
{
	background-color:yellow;
	/*---rotateX()方法，围绕其在一个给定度数X轴旋转的元素---*/
	transform:rotateX(120deg);
	-webkit-transform:rotateX(120deg); /* Safari and Chrome */
}

div#div2
{
	background-color:blue;
	/*---rotateY()方法，围绕其在一个给定度数Y轴旋转的元素---*/
	transform:rotateY(120deg);
	-webkit-transform:rotateY(120deg); /* Safari and Chrome */
}
</style>
</head>
<body>

<h2>rotateX()方法，围绕其在一个给定度数X轴旋转的元素</h2>
<div>rotateX</div>
<div id="div1">rotate--X</div>

<h2>rotateY()方法，围绕其在一个给定度数Y轴旋转的元素</h2>
<div>rotateY</div><br>
<div id="div2">rotate--Y</div>

</body>
</html>

2.结果：