css3 preserve-3d 的理解

css3 perspective 的理解 看下面demo就理解了 perspective保证子元素能以3D的空间展现

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>转换模块-正方体</title>
    <style>

    *{
        margin: 0;
        padding: 0;
        /*去除默认边距*/
    }

    ul{
        width: 200px;
        height: 200px;
        border: 1px solid #000;
        box-sizing: border-box;
        margin: 100px auto;
        position: relative;
        /*修改基本样式*/
        transform: rotateY(45deg) rotateX(45deg);
        /*旋转看看效果*/
        transform-style: preserve-3d;
        /*将父元素设置为3d空间*/
    }
    ul li{
        list-style: none;
        width: 200px;
        height: 200px;
        font-size: 60px;
        text-align: center;
        line-height: 200px;
        position: absolute;
        left: 0;
        top: 0;
        /*修改基本样式*/
    }
    ul li:nth-child(1){
        background-color: red;
        transform: translateX(-100px) rotateY(90deg);
        /*将第一个l向左移动100像素,然后绕y轴旋转90度,形成左边的面*/
    }
    ul li:nth-child(2){
        background-color: green;
        transform: translateX(100px) rotateY(90deg);
        /*将第一个2向右移动100像素,然后绕y轴旋转90度*,形成右边的面*/
    }
    ul li:nth-child(3){
        background-color: blue;
        transform: translateY(-100px) rotateX(90deg);
        /*将第一个3向上移动100像素,然后绕x轴旋转90度,形成上面的面*/
    }
    ul li:nth-child(4){
        background-color: yellow;
        transform: translateY(100px) rotateX(90deg);
        /*将第一个4向下移动100像素,然后绕x轴旋转90度*/
    }
    ul li:nth-child(5){
        background-color: purple;
        transform: translateZ(-100px);
        /*将第一个5向后移动100像素,形成后面的面*/
    }
    ul li:nth-child(6){
        background-color: pink;
        transform: translateZ(100px);
        /*将第一个l向前移动100像素,形成前面的面*/
    }

</style>
</head>
<body>
<ul>
    <!--首先做好html布局,正方体有6个面,所以写了6个li-->
    <li>1</li>
    <li>2</li>
    <li>3</li>
    <li>4</li>
    <li>5</li>
    <li>6</li>
</ul>
</body>
</html>

css3 mask遮罩动画(照明灯效果)

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
.wrap{
    position:absolute;
    width: 400px;
    border:1px solid black;
}
#mask{
    height: 300px;
    background:url(http://sandbox.runjs.cn/uploads/rs/142/wat3wtnz/dongzhi.jpg) lightblue;
    -webkit-mask:  url(http://sandbox.runjs.cn/uploads/rs/142/wat3wtnz/mask.png) no-repeat;
    /*animation: 2s maskPosition infinite alternate ;*/
}

 @keyframes maskPosition{
    0%{-webkit-mask-position:0 0;}
    100%{-webkit-mask-position:1rem 1rem;}
} 
</style>
</head>
<body>
<div class="wrap">
    <div id="mask"></div>    
</div>
<script>

</script>
</body>
</html>

实现照明灯 可以再参考http://newmiracle.cn/?p=1833这个
ps -webkit-mask-position 这个建议用rem来计算 不要用百分比计算 百分比不是按照图片的宽度来计算的
-webkit-mask-image这个用了 -webkit-gradient -webkit-mask-position这个就失去效果了

jquery.eraser制作擦涂效果

jquery.eraser制作擦涂效果

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="utf-8"/>
        <meta name='HandheldFriendly' content='True'/>
        <!--<meta name='viewport' content='initial-scale=1.0; maximum-scale=1.0; user-scalable=0;' />-->
        <meta name='viewport' content='user-scalable=0'/>
        <meta name="viewport" content="width=device-width"/>
        <title>
            jQuery.eraser, a plugin that makes an image erasable (touch & mouse)
        </title>
        <style type="text/css">
        
                * {
     
                }
        
        
        
                    body {
        
                        background: #FFF;
        
                        color: #000;
        
                        margin: 5px;
        
                        padding: 0px;
        
                        margin-bottom: 45px;
        
                        text-align: center;
        
                        font-family: Helvetica, Arial;
        
                    }
        
        
        
                    a {
        
                        color: #000;
        
                    }
        
        
        
                    a.box {
        
                        text-decoration: none;
        
                        display: inline-block;
        
                        color: #FFF;
        
                        background: #000;
        
                        padding: 10px;
        
                        margin: 10px;
        
                    }
        
        
        
                    .big {
        
                        font-size: 2em;
        
                        display: inline-block;
        
                        margin: 10px;
        
                    }
        
                    .container {
        
                        position: relative;
        
                        display: inline-block;
        
                        width: 533px;
        
                        height: 800px;
        
                    }
        
        
        
                    #robot {
        
                        position: absolute;
        
                        top: 0px;
        
                        left: 0px;
        
                        z-index: 1;
        
                        -webkit-box-shadow: 0px 0px 20px 0px #707070;
        
                        -moz-box-shadow: 0px 0px 20px 0px #707070;
        
                        box-shadow: 0px 0px 20px 0px #707070;
        
                    }
        
        
        
                    #redux {
        
                        position: absolute;
        
                        top: 0px;
        
                        left: 0px;
        
                        z-index: 2;
        
                    }
        
        
        
                </style>
    </head>
    <body>
        <h1>
            jQuery.eraser()
        </h1>
        <p>
            a plugin that replaces the targeted image by an interactive canvas
            <br/>
            that can be erased
            using touch ou mouse moves.
            <br/>
            <b>
                try by yourself below...
            </b>
        </p>
        <p>
            <code id="percent">
                $("#myImage").eraser();
            </code>
        </p>
        <span class="container">
            <img id="robot" src="img/robot.jpg"/>
            <img id="redux" src="img/robot_redux.png"/>
        </span>
        <p>
            <a href="#" onclick="reset(event);" class="box">
                RESET
            </a>
            <a href="#" onclick="remove(event);" class="box">
                CLEAR
            </a>
            <!--<a href="#" onclick="grow(event);" class="box"> GROW </a>-->
        </p>
        <br/>
        <a href="teeth.htm">
            or brush his teeth
        </a>
        .
    </p>
    <script src="http://www.jq22.com/jquery/2.1.1/jquery.min.js"></script>
    <script src='jquery.eraser.js' type='text/javascript'></script>
    <script type = "text/javascript">
    
    
    
                addEventListener( "load", init, false );
    
    
    
                function init( event ) {
    
                    $("#redux").eraser();
    
    
    
                    // you can alse specify the brush size (in pixel) by using options :
    
                    // $("#redux").eraser({size: 20});
    
                }
    
    
            </script>
</body>
</html>

ps:制作刮刮卡 涂抹效果都可以