css3的3D转换

最新推荐文章于 2021-08-03 21:35:45 发布

依然那么楞

最新推荐文章于 2021-08-03 21:35:45 发布

阅读量692

点赞数

文章标签： css3 3D旋转 3D 旋转

本文链接：https://blog.csdn.net/ling811/article/details/17097641

版权

函数	描述
matrix3d(n,n,n,n,n,n, n,n,n,n,n,n,n,n,n,n)	定义 3D 转换，使用 16 个值的 4x4 矩阵。
translate3d(x,y,z)	定义 3D 转化。
translateX(x)	定义 3D 转化，仅使用用于 X 轴的值。
translateY(y)	定义 3D 转化，仅使用用于 Y 轴的值。
translateZ(z)	定义 3D 转化，仅使用用于 Z 轴的值。
scale3d(x,y,z)	定义 3D 缩放转换。
scaleX(x)	定义 3D 缩放转换，通过给定一个 X 轴的值。
scaleY(y)	定义 3D 缩放转换，通过给定一个 Y 轴的值。
scaleZ(z)	定义 3D 缩放转换，通过给定一个 Z 轴的值。
rotate3d(x,y,z,angle)	定义 3D 旋转。
rotateX(angle)	定义沿 X 轴的 3D 旋转。
rotateY(angle)	定义沿 Y 轴的 3D 旋转。
rotateZ(angle)	定义沿 Z 轴的 3D 旋转。
perspective(n)	定义 3D 转换元素的透视视图。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<style>
#rotatey{
	border: 1px solid #000000;
	background:#F00;
	margin: 10px;
	opacity:2;
}
.animated_div{
	width: 60px;
	height: 40px;
	color: #ffffff;
	position: relative;
	font-weight: bold;
	padding: 20px 10px 0px 10px;
	float: left;
	margin: 20px;
	margin-right: 50px;
	border: 1px solid #888888;
	-webkit-border-radius: 5px;
	-moz-border-radius: 5px;
	border-radius: 5px;
	font: 12px Verdana, Arial, Helvetica, sans-serif;
	text-align: center;
	vertical-align: middle;
}
</style>
<title>无标题文档</title>
</head>

<body>
<div οnclick="rotateYDIV()" class="animated_div rotate" id="rotatey">3D旋转</div>
<script>
	<!--
var x,y,n=0,ny=0,rotINT,rotYINT

function rotateYDIV()
{
y=document.getElementById("rotatey")
clearInterval(rotYINT)
rotYINT=setInterval("startYRotate()",10)
}
function startRotate()
{
n=n+1
x.style.transform="rotate(" + n + "deg)"
x.style.webkitTransform="rotate(" + n + "deg)"
x.style.OTransform="rotate(" + n + "deg)"
x.style.MozTransform="rotate(" + n + "deg)"
if (n==180 || n==360)
	{
	clearInterval(rotINT)
	if (n==360){n=0}
	}
}
function startYRotate()
{
ny=ny+1
y.style.transform="rotateY(" + ny + "deg)"
y.style.webkitTransform="rotateY(" + ny + "deg)"
y.style.OTransform="rotateY(" + ny + "deg)"
y.style.MozTransform="rotateY(" + ny + "deg)"
if (ny==180 || ny>=360)
	{
	clearInterval(rotYINT)
	if (ny>=360){ny=0}
	}
}
//-->

</script>
</body>
</html>

效果图：

依然那么楞

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
css3的3D转换

函数描述matrix3d(n,n,n,n,n,n,n,n,n,n,n,n,n,n,n,n)定义 3D 转换，使用 16 个值的 4x4 矩阵。translate3d(x,y,z)定义 3D 转化。translateX(x)定义 3D 转化，仅使用用于 X 轴的值。translateY(y)定
复制链接

扫一扫