文章分类 Classification
css3 立体效果教程
稿件来源: 阳光企业网站管理系统 撰稿作者: 太阳光 发表日期: 2013-10-15 阅读次数: 312 查看权限: 游客查看
重点讲解css3 transform设置或检索对象的旋转。
css3新功能不少，其中transform旋转就是一个很酷的东西。
先看看其语法：transform：none | matrix(<number>,<number>,<number>,<number>,<number>,<number>)? translate(<length>[,<length>])? translateX(<length>)? translateY(<length>)? rotate(<angle>)? scale(<number>[,<number>])? scaleX(<number>)? scaleY(<number>)? skew(<angle>[,<angle>])? skewX(<angle>) || skewY(<angle>)?
- none：无转换
- matrix(<number>,<number>,<number>,<number>,<number>,<number>)：以一个含六值的(a,b,c,d,e,f)变换矩阵的形式指定一个2D变换，相当于直接应用一个[a,b,c,d,e,f]变换矩阵
- translate(<length>[, <length>])：指定对象的2D translation（2D平移）。第一个参数对应X轴，第二个参数对应Y轴。如果第二个参数未提供，则默认值为0
- translateX(<length>)：指定对象X轴（水平方向）的平移
- translateY(<length>)：指定对象Y轴（垂直方向）的平移
- rotate(<angle>)：指定对象的2D rotation（2D旋转），需先有transform-origin属性的定义
- scale(<number>[, <number>])：指定对象的2D scale（2D缩放）。第一个参数对应X轴，第二个参数对应Y轴。如果第二个参数未提供，则默认取第一个参数的值
- scaleX(<number>)：指定对象X轴的（水平方向）缩放
- scaleY(<number>)：指定对象Y轴的（垂直方向）缩放
- skew(<angle> [, <angle>])：指定对象skew transformation（斜切扭曲）。第一个参数对应X轴，第二个参数对应Y轴。如果第二个参数未提供，则默认值为0
- skewX(<angle>)：指定对象X轴的（水平方向）扭曲
-
skewY(<angle>)：指定对象Y轴的（垂直方向）扭曲
光看语法是不够理解其用处的，下面我们以代码说明：
<!DOCTYPE html>
<html>
<head>
<meta charset=UTF-8>
<title>css3 3D</title>
<style type="text/css">
.cube{
margin: 50px auto;
width: 200px;
position: relative;
}
.cube li{
list-style: none;
height: 200px;
width: 200px;
line-height: 200px;
position: absolute;
text-align: center;
background:#eee;
}
.cube li:nth-child(1){
transform: skew(-60deg,30deg) translate(50px,30px) scale(1,0.582);
}
</style>
</head>
<body>
<ul class="cube">
<li>上</li>
</ul>
</body>
</html>
如果你的浏览器支持HTML5就会看到一块被压扁的灰色方块。transform: skew(-60deg,30deg) translate(50px,30px) scale(1,0.582); 意思是：旋转：扭曲（x轴方向扭曲-60度，y轴方向扭曲30度）平移方向（x轴移动50像素，y轴移动30像素）缩放（x轴方向不变，y轴方向是原来的1.582倍）。如果你的html5浏览器因仍看不到效果，那我们可以添加一些兼容代码，完整的为：
.cube li:nth-child(1){
transform: skew(-60deg,30deg) translate(50px,30px) scale(1,0.582);
-webkit-transform: skew(-60deg,30deg) translate(50px,30px) scale(1,0.582);
-moz-transform: skew(-60deg,30deg) translate(50px,30px) scale(1,0.582);
-ms-transform: skew(-60deg,30deg) translate(50px,30px) scale(1,0.582);
}
本是一行代码，变成了五行。我们只能等着一统江湖的时候。以下出现不兼容的地方你也同样处理一下。
<!DOCTYPE html>
<html>
<head>
<meta charset=UTF-8>
<title>css3 3D</title>
<style type="text/css">
.cube{
margin: 50px auto;
width: 200px;
position: relative;
}
.cube li{
list-style: none;
height: 200px;
width: 200px;
line-height: 200px;
position: absolute;
text-align: center;
}
.cube li:nth-child(1){
background-color:#f5f4f4;
transform: skew(-60deg,30deg) translate(50px,30px) scale(1,0.582);
}
.cube li:nth-child(2){
background-color:#DDDDDD;
transform: skew(0deg, 30deg) translate(-102px, 276px) scale(1, 1);
}
.cube li:nth-child(3){
background-color:#eaeaea;
transform: skew(0deg, -30deg) translate(98px, 273px) scale(1, 1);
}
</style>
</head>
<body>
<ul class="cube">
<li>上</li>
<li>左</li>
<li>右</li>
</ul>
</body>
</html>
上面的代码我们又添加了两个面，看起来就是立体效果了。但是透视不合格哟！什么叫透视你不懂就问问艺术生吧。
对此css3有专门处理透视的功能叫perspective，参数是数字，表示建立一个3D元素距视图的距离。默认值为0，表示没有透视。同时可设置视点：perspective-origin。如果想得到透视效果就不能简单使用skew旋转的图形，必须是建立在含有z轴的变形3D图形里。
<!DOCTYPE html>
<html>
<head>
<meta charset=UTF-8>
<title>css3 3D</title>
<style type="text/css">
.cube{
margin: 50px auto;
width: 200px;
height: 200px;
position: relative;
perspective: 200px;
perspective-origin: 50% 100px;/*视点 本例等价50% 50%*/
}
.cube li{
list-style: none;
height: 200px;
width: 200px;
line-height: 200px;
position: absolute;
text-align: center;
}
.cube li:nth-child(1){
background-color:#f5f4f4;
transform: translateZ(-100px) rotateY(45deg);/*3D图形*/
}
</style>
</head>
<body>
<ul class="cube">
<li>左</li>
</ul>
</body>
</html>
如此就可显示一个已经是正确透视的图形了。下面我们来完成一个完整的正方形，并不断在旋转的透视图吧：
<!DOCTYPE html>
<html>
<head>
<meta charset=UTF-8>
<title>css3 3D旋转 建议Firefox浏览器查看</title>
<style type="text/css">
@keyframes spin{/*指定动画开始与结束的效果*/
from{
transform:rotateY(0)
}to{
transform:rotateY(360deg)
}
}
.wrap {/*最外建立一个视区*/
text-align: center;
perspective: 800px;
perspective-origin: 50% 100px;
}
.cube{
margin: 100px auto;
padding: 0;
width: 200px;
height: 200px;
position: relative;
transform-style: preserve-3d;/*使被转换的子元素保留其 3D 转换*/
transform-origin:center;/*以中心为旋转点*/
animation: 5s linear 0s normal none infinite spin;/*动画*/
}
.cube li{
list-style: none;
height: 200px;
width: 200px;
line-height: 200px;
position: absolute;
text-align: center;
font-size: 100px;
font-family: "宋体";
background: none repeat scroll 0 0 rgba(249, 255, 25, 0.8);
color: #ff6119;
box-shadow: 0 0 30px rgba(107, 43, 15, 0.8) inset;
color: rgba(0, 0, 0, 0.8);
}
.cube li:nth-child(1){
transform: translateZ(100px);
}
.cube li:nth-child(2){
transform: translateZ(-100px) rotateY(180deg);
}
.cube li:nth-child(3){
transform: rotateX(-90deg) translateY(-100px);
transform-origin: top center;
}
.cube li:nth-child(4){
transform: rotateX(90deg) translateY(100px);
transform-origin: bottom center;
}
.cube li:nth-child(5){
transform: rotateY(270deg) translateX(-100px);
transform-origin: top left;
}
.cube li:nth-child(6){
transform: rotateY(-270deg) translateX(100px);
transform-origin: top right;
}
</style>
</head>
<body>
<div class="wrap">
<ul class="cube">
<li>前</li>
<li>后</li>
<li>上</li>
<li>下</li>
<li>左</li>
<li>右</li>
</ul>
</div>
</body>
</html>
为了简洁暂没加上兼容代码，真实使用时请加上，当然代码也会成陪增长哟。完整效果与代码！
关键词: css3,立体效果,transform 编辑时间: 2013-10-15 16:36:39
0
高兴
0
支持
0
搞笑
0
不解
0
谎言
0
枪稿
0
震惊
0
无奈
0
无聊
0
反对
0
愤怒
0%(0)
0%(0)
中搜索：css3 立体效果教程
中搜索：css3 立体效果教程
- 暂无评论
文章图片 article Pictrue
网友评论