css3和html5的学习

浏览数：14 / 时间：2015年06月09日

本文是此链接的源码。http://www.imooc.com/learn/77

关于的html5的使用：

transition----含义是：过渡的过程，可以对各种属性设置变化。

有5中过渡的形式：ease、linear、ease-in、ease-out、ease-in-out。

<!DOCTYPE html>
        <html>
<head>
    <title>html5 transition</title>
    <style type="text/css">
        #block_bar1{
            width: 40px;
            height: 100px;
            background-color: #69c;
            -webkit-transition:width 5s ease;
        }
        #block_bar1:hover{
            width: 600px;
            height: 100px;
            background-color: #ff0000;
        }
        #block_bar2{
            width: 40px;
            height: 100px;
            background-color: #69c;
            -webkit-transition:width 5s linear;
        }
        #block_bar2:hover{
            width: 600px;
            height: 100px;
            background-color: #ff0000;
        }
        #block_bar3{
            width: 40px;
            height: 100px;
            background-color: #69c;
            -webkit-transition:width 5s ease-in;
        }
        #block_bar3:hover{
            width: 600px;
            height: 100px;
            background-color: #ff0000;
        }
        #block_bar4{
            width: 40px;
            height: 100px;
            background-color: #69c;
            -webkit-transition:width 5s ease-out;
        }
        #block_bar4:hover{
            width: 600px;
            height: 100px;
            background-color: #ff0000;
        }
    </style>
</head>
<body>
    <div id="block_bar1">
    </div>
    <div id="block_bar2">
    </div>
    <div id="block_bar3">
    </div>
    <div id="block_bar4">
    </div>
</body>
        </html>

不同的变化形式。

transform-----含义是：改变，使…变形；转换，动词

该行为是html5新增加的一个特性，主要translate（）、rotate（）、scale（）、skew()等属性可以设置出动画。

example1：

<!DOCTYPE html>
<html>
<head>
    <title></title>
    <style>
        #test{
            -webkit-perspective:800;
            -webkit-perspective-origin: 50% 50%;
            -webkit-transform-style:-webkit-preserve-3d;

        }
        #block{
            width: 500px;
            height: 500px;
            background-color: #69c;
            margin: 100px auto;
            -webkit-transform:rotateZ(30deg);
        }

    </style>
</head>
<body>
    <div id="test">
        <div id="block">

        </div>
    </div>
</body>
</html>

example2：

<!DOCTYPE html>
<html>
<head>
    <title>3dRotate</title>
    <style type="text/css">
        #test{
            -webkit-perspective:800;
            -webkit-perspective-origin:50% 50%;
            -webkit-tranform-style:-webkit-preserve-3d;
        }
        #block{
            width: 200px;
            height: 200px;
            background-color: #6699cc;
            margin:100px auto;
        }
        #option{
            margin: 60px auto;
            font-size: 16px;
            font-weight: bold;
            width: 800px;
        }
        #option .range-control{width: 700px;}
    </style>

    <script type="text/javascript">
        function rotate(){
            var x=document.getElementById("rotatex").value;
            var y=document.getElementById("rotatey").value;
            var z=document.getElementById("rotatez").value;
            document.getElementById("block").style.webkitTransform = "rotateX("+x+"deg) rotateY("+y+"deg) rotateZ("+z+"deg)";

            document.getElementById("degX-span").innerText =x;
            document.getElementById("degY-span").innerText =y;
            document.getElementById("degZ-span").innerText =z;

        }
    </script>
</head>
<body>
    <div id="test">
        <div id="block"></div>
    </div>
    <div id="option">
        <p>rotateX:<span id="degX-span">0</span>  degree</p>
        <input type="range" min="-360" max="360" id="rotatex" value="0" class="range-control" onMouseMove="rotate()" /><br>
        <p>rotateY:<span id="degY-span">0</span>  degree</p>
        <input type="range" min="-360" max="360" id="rotatey" value="0" class="range-control" onMouseMove="rotate()" /><br>
        <p>rotateX:<span id="degZ-span">0</span>  degree</p>
        <input type="range" min="-360" max="360" id="rotatez" value="0" class="range-control" onMouseMove="rotate()" /><br>
    </div>
</body>
</html>

使用transform对translate和rotate进行设置。

最后一个是3维场景的搭建和翻页效果：

<!DOCTYPE html>
<html>
<head>
    <title></title>
    <style type="text/css">
        #my3dspace{
            -webkit-perspective:800;
            -webkit-perspective-origin:50% 50%;
            overflow: hidden;
        }
        #pagegroup{
            width: 400px;
            height: 400px;
            margin: 0px auto;

            -webkit-transform-style:preserve-3d;
            position: relative;
        }
        #op{
            text-align: center;
            margin:40px auto;

        }
        .page{
            width: 360px;
            height: 360px;
            padding: 20px;
            background-color: #000;

            color: #fff;
            font-weight: bold;
            font-size: 360px;
            line-height: 360px;
            text-align: center;
            position: absolute;
        }
        #page1{
            -webkit-transform-origin:bottom;
            -webkit-transition:-webkit-transform 1s linear;
        }
        #page2,#page3,#page4,#page5,#page6{
            -webkit-transform-origin:bottom;
            -webkit-transition:-webkit-transform 1s linear;
            -webkit-transform:rotateX(90deg);
        }
    </style>
    <script type="text/javascript">
        var curIndex = 1;
        function next(){
            if(curIndex == 6)
            return;
            var curPage = document.getElementById("page"+curIndex);
            curPage.style.webkitTransform = "rotateX(-90deg)";

            curIndex ++;
            var nextPage = document.getElementById("page"+curIndex);
            nextPage.style.webkitTransform = "rotateX(0deg)";
        }
        function prev(){
            if(curIndex == 1)
            return;

            var curPage = document.getElementById("page"+curIndex);
            curPage.style.webkitTransform = "rotateX(90deg)";

            curIndex --;
            var nextPage = document.getElementById("page"+curIndex);
            nextPage.style.webkitTransform = "rotateX(0deg)";
        }

    </script>
</head>
<body>
    <div id="my3dspace">
        <div id="pagegroup">
            <div class="page" id="page1">1</div>
            <div class="page" id="page2">2</div>
            <div class="page" id="page3">3</div>
            <div class="page" id="page4">4</div>
            <div class="page" id="page5">5</div>
            <div class="page" id="page6">6</div>
        </div>
    </div>
    <div id="op">
        <a href="javascript:next()">next</a> <a href="javascript:prev()">previous</a>
    </div>
</body>
</html>