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 2D转换&3D转换

1、transform属性方法 Transform 方法 2、2D转换 translate()方法 .div1 { width: 10...
  • zhaobw831
  • zhaobw831
  • 2016年01月17日 19:56
  • 2492

HTML5学习笔记—CSS3 transform转换属性(2D/3Dtransform方法)

transform方法 table{ border:3px solid yellow; border-collapse:collapse; } td,th{ border:1px solid pin...
  • ccnanxi
  • ccnanxi
  • 2017年01月03日 16:00
  • 528

学习CSS3 3D转换,制作一个3D立方体

要想实现3D的效果,其实非常简单,只需指定一个元素为容器并设置transform-style:preserve-3d,那么它的后代元素便会有3D效果。不过有很多需要注意的地方,这里把我学习的方法,过程...
  • u014346301
  • u014346301
  • 2016年10月26日 16:28
  • 2818

CSS3 2 2D 3D转换

CSS3 2 2D 3D转换   通过 CSS3 转换,我们能够对元素进行移动、缩放、转动、拉长或拉伸。 转换是使元素改变形状、尺寸和位置的一种效果,使用 2D 或 3D 转换来转换元素。   1浏...
  • wulinbanxia
  • wulinbanxia
  • 2017年06月22日 00:12
  • 236

使用纯CSS3实现一个3D旋转的书本

有一些前沿的电商网站已经开始使用3D模型来展示商品并支持在线定制,而其中图书的展示是最为简单的一种,无需复杂的建模过程,使用图片和CSS3的一些变换即可实现更好的展示效果,简洁而实用。书本的3D模型是...
  • iefreer
  • iefreer
  • 2016年03月19日 18:03
  • 4372

css3绘制3d翻页效果

核心内容: 1.css3的transition属性来制作简单的动画 transition属性可以为指定的css属性添加动画效果,这个动画用到的是transform属性 transition:...
  • Yalishizhude
  • Yalishizhude
  • 2015年02月22日 23:21
  • 2123

CSS3旋转球3D视觉效果

CSS3旋转球3D效果                                                     //CSS样式 body{     b...
  • LvandDuan
  • LvandDuan
  • 2015年12月01日 17:02
  • 1471

CSS3之 3D变换、3D动画

CSS3之 3D变换、3D动画 3D变换 transform-style(preserve-3d) 建立3D空间 Perspective 景深(类似于站在多远地方看) Transform 新增...
  • u013267266
  • u013267266
  • 2016年05月03日 19:06
  • 788

CSS3特效:2D转换&小案例

一、2D转换之移动 1.transform 属性向元素应用 2D 或 3D 转换。该属性允许我们对元素进行旋转、缩放、移动或倾斜。 2. translate(x,y)        //定义2D转换 ...
  • luohuaxinyue
  • luohuaxinyue
  • 2015年12月28日 20:30
  • 1084

纯CSS3实现一个旋转的3D立方体盒子

网易前端微专业课程,里面有一个课外作业是实现一个3D旋转立方体,花了点时间做了下,还有点意思,写个简单教程,供大家学习。...
  • sinat_27304985
  • sinat_27304985
  • 2015年08月03日 16:22
  • 9530
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:css3的3D转换
举报原因:
原因补充:

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