您当前位置:首页 > 文章中心 > HTML5+CSS3 > CSS3

css3 立体效果教程

稿件来源: 阳光企业网站管理系统   撰稿作者: 太阳光   发表日期: 2013-10-15   阅读次数: 275   查看权限: 游客查看

重点讲解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)
共有0 条评论 发言请遵守【相关规定

网友评论

会员头像
发 表同步腾讯微博    验证码:  点击更新请先登陆
  • 暂无评论
关闭模块文章图片 article Pictrue
  • 我的妈妈爸爸
  • 基于koa2+mysql+vue2.0+Element阳光内容管理系统
  • 代码覆盖率工具 Istanbul 入门教程
  • 全栈工程师的武器——MEAN
  • 9款超炫的 CSS3 复选框(Checkbox)
  • 微信开发在线翻译功能
  • CSS3那些不为人知的高级属性
  • 给easyui的datebox添加清空事件
  • flash写字效果
  • kendoUI系列教程之DropDownList下拉菜单
  • kendoUI系列教程之datetimepicker日期时间选择
  • kendoUI系列教程之datepicker日期选择
  • kendoUI系列教程之combobox下拉列表框
  • kendoUI系列教程之colorpicker
  • kendoUI系列教程之calendar日历表
  • kendoUI系列教程之autocomplete自动补齐