CSS3——transform学习

CSS动画效果可以使用transform和Animation，前者较简单，先学习前者。

transform有几个基本变换，平移、旋转、缩放、扭曲

一、translate平移

有translate2d和translate3d之分，实际项目中可以只考虑3d，因为可以开启3d硬件加速。

transform：translate3d(Xpx,Ypx,Zpx)

即各自向各方向平移多少像素，单位px

二、rotate旋转

实际也可以只考虑3d，即rotate3d

但是rotate3d只能对各轴设定相同的值，即transform：rotate3d(1,1,0,45deg)，前三个参数是布尔值，表示当前轴是否旋转，不能单独指定旋转角度。

可以transform：rotate3d(1,0,0,45deg) rotate3d(0,1,0,90deg) rotate3d(0,0,1,30deg)  对各轴设定选择角度

三、scale缩放

四、skew扭曲

平移和选择的demo如下

<html>
<head>
    <title>transform demo</title>
    <script src="http://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
    <style>
        body{
            overflow: hidden;
        }
        #content{
            -webkit-perspective: 500;
            -webkit-perspective-origin:50% 50%;
            width: 100%;
            height: 100%;
        }
        #test{
            width: 280px;
            height: 397px;
            margin: 0 auto;
            background-image: url(bg.png);
            background-color: #eee;
            transition:all 1s;
        }
        #tool{
            width: 300px;
            height: 200px;
            margin: 0 auto;
            text-align: center;
            padding: 20px;
        }
    </style>
    <script>
        function getlate(){
            var lateX=$("input[name='lateX']").val();
            $("input[name='lateX']").next('span').html(lateX+"px");
            
            var lateY=$("input[name='lateY']").val();
            $("input[name='lateY']").next('span').html(lateY+"px");
            
            var lateZ=$("input[name='lateZ']").val();
            $("input[name='lateZ']").next('span').html(lateZ+"px");

            $("#test").css("transform","translate3d("+lateX+"px,"+lateY+"px,"+lateZ+"px)");
        }
        function getrotate(){
            var rotateX=$("input[name='rotateX']").val();
            $("input[name='rotateX']").next('span').html(rotateX+"deg");

            var rotateY=$("input[name='rotateY']").val();
            $("input[name='rotateY']").next('span').html(rotateY+"deg");

            var rotateZ=$("input[name='rotateZ']").val();
            $("input[name='rotateZ']").next('span').html(rotateZ+"deg");

            $("#test").css("transform","rotate3d(1,0,0,"+rotateX+"deg) "+"rotate3d(0,1,0,"+rotateY+"deg) "+"rotate3d(0,0,1,"+rotateZ+"deg)");
        }
        $(function(){
            getlate();
            getrotate();

        });
    </script>
</head>
<body>
    <div id="content">
        <div id="test"></div>
        <div id="tool">
            X轴平移<input type="range" name="lateX" min="-100" max="100" value="0" onchange="getlate();"/><span></span><br />
            Y轴平移<input type="range" name="lateY" min="-100" max="100" value="0" onchange="getlate();"/><span></span><br />
            Z轴平移<input type="range" name="lateZ" min="-100" max="100" value="0" onchange="getlate();"/><span></span><br />
            X轴旋转<input type="range" name="rotateX" min="-180" max="180" value="0" onchange="getrotate();"/><span></span><br />
            Y轴旋转<input type="range" name="rotateY" min="-180" max="180" value="0" onchange="getrotate();"/><span></span><br />
            Z轴旋转<input type="range" name="rotateZ" min="-180" max="180" value="0" onchange="getrotate();"/><span></span>
        </div>
    </div>
</body>
</html>

 

posted @ 2015-09-01 20:30  fj0716  阅读(274)  评论(0)  编辑  收藏  举报