css3的3D转换

原创 2013年12月03日 16:32:07

函数 描述
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 onclick="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>

效果图:





版权声明:原创文章,请标明出处~~~

新闻列表(手风琴效果 CSS3 3D转换)特效代码

news_ep *{margin:0;padding:0;} #newsBox{width:300px;position:absolute;top:0;right:0;bottom:0;left:...

CSS3 3D 转换

1、rotateX() 方法    rotateX()方法,围绕其在一个给定度数X轴旋转的元素 div { width:100px; height:75px; background-color...

CSS3 3D转换入门篇

为了对CSS3中的3D transform 有个基本概念,首先我们来看个Demo,由四个DIV经过3D转换而来。可以通过上下左右键来改变视角方向,+ — 键来改变视角深度。     http://f...

CSS3动画-2D、3D转换

通过CSS3转换,我们能对元素进行移动,缩放,转动,拉长或拉伸。可以使用2D、3D来转换元素。1、2D转换方法 (1)、translate():移动效果 在css文件中加入如下代码: tra...

CSS3 2D/3D转换

Internet Explorer 10、Firefox 以及 Opera 支持 transform 属性。 Chrome 和 Safari 需要前缀 -webkit-。 Internet Exp...

CSS3基础(1)2D与3D转换

全面回顾css3的api,方能更好地在实践中使用 2D转换 浏览器支持 translate():通过 translate() 方法,元素从其当前位置移动,根据给定的 left(x 坐标) 和 top(...
  • hope_It
  • hope_It
  • 2017年05月06日 15:09
  • 169

CSS3 2D转换 3D转换

CSS3 2D转换 3D转换
  • safiri
  • safiri
  • 2016年07月18日 09:39
  • 222

css3 2d转换3d转换以及动画的知识点汇总

css3 2d转换 2d转换的方法: 1、移动 translate(x, y) 可以改变元素的位置,x、y可为负值; 2、缩放 scale(x, y) 可以对元素进行水平和垂直方向的缩放,x、y...

CSS3 2D转换&3D转换

1、transform属性方法 Transform 方法 2、2D转换 translate()方法 .div1 { width: 10...

css3图片3d翻开效果

  • 2016年12月21日 14:29
  • 125KB
  • 下载
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:css3的3D转换
举报原因:
原因补充:

(最多只允许输入30个字)