css CSS3,3d转换

Posted

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了css CSS3,3d转换相关的知识,希望对你有一定的参考价值。

rotateY()方法,围绕其在一个给定度数Y轴旋转的元素。

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> 
<title>W3C(w3cschool.cn)</title> 
<style> 
div
{
	width:100px;
	height:75px;
	background-color:red;
	border:1px solid black;
}
div#div2
{
	transform:rotateY(130deg);
	-webkit-transform:rotateY(130deg); /* Safari and Chrome */
}
</style>
</head>
<body>
<p><b>注意:</b> Internet Explorer 9 (以及更早版本的浏览器) 和 Opera 不支持 rotateY方法.</p>
<div>Hello. This is a DIV element.</div>
<div id="div2">Hello. This is a DIV element.</div>
</body>
</html>
rotateX()方法,围绕其在一个给定度数X轴旋转的元素。

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> 
<title>W3C(w3cschool.cn)</title> 
<style> 
div
{
    width:100px;
    height:75px;
    background-color:red;
    border:1px solid black;
}
div#div2
{
    transform:rotateX(120deg);
    -webkit-transform:rotateX(120deg); /* Safari and Chrome */
}
</style>
</head>
<body>
<p><b>注意:</b> Internet Explorer 9 (以及更早版本的浏览器) 和 Opera 不支持 rotateX 方法.</p>
<div>Hello. This is a DIV element.</div>
<div id="div2">Hello. This is a DIV element.</div>
</body>
</html>

以上是关于css CSS3,3d转换的主要内容,如果未能解决你的问题,请参考以下文章

css3 3d转换

Css3之高级-5 Css转换(简介2D转换3D转换)

CSS3的2D转换3D转换和过渡

03-css3D转换

CSS3动画2D3D转换

css3 中怎样实现div的2d,3d旋转