transform 和 translate

transform的中文翻译是变换、变形，是css3的一个属性，和其他width，height属性一样

translate 是transform的属性值，是指元素进行2D变换，2D变换就是指，元素以当前位置（0,0）按照x轴的方向移动多少，按照y轴的方向移动多少

例如：

transform：translate(0,100%) 表示从元素的当前位置延y轴方向，向下移动整个元素高度的距离

transform：translate(-20px,0) 表示从元素的当前位置延x轴方向，向左移动20px

transform 有很多其它属性值，translate3D（3D变换）,scale（2D缩放）等其他的变换方式

transition

transition  在一定时间之内，一组css属性变换到另一组属性的动画展示过程。可以用来实现动态效果，css3的属性

语法 transition：需要变换的属性 变换需要的时间 控制动画速度变化 延期多少时间后开始执行

transition属性写在最初的样式里，而不是放在结束的样式里，即定义动画开始之前的元素外观的样式。只需要给元素设置一次transition，浏览器就会负责以动画展示从一个样式到另一个样式。

例如：

transition:width 2s;

transition:translate 2s;

transtion:all 2s;

实例1：

<html>

    <head>

        <title></title>

        <style>

            .bg{

              background:red;

              width:200px;

              height:300px;

              position:relative;

              overflow:hidden;

            }

            .top{

              color:white;

              text-align:center;

              padding:10px;

            }

            #bottomDiv{

              background:yellow;

              width:%;

              position:absolute;

              bottom:;top:50px;

              transition:transform .3s;

            }

        </style>

        <script>

        function clickM(){

            window.flag = !window.flag;

            if(window.flag){

                document.getElementById('bottomDiv').style.cssText='transform:translate(0,100%)';

            }else{

                document.getElementById('bottomDiv').style.cssText='';

            }

        }

        </script>

    </head>

    <body>

        <div class="bg">

            <div class="top" onclick="clickM()">click me</div>

            <div id="bottomDiv"></div>

        </div>

    </body>

</html>

实例2：

<html>

    <head>

        <title></title>

        <style>

            h3{

                margin:;

                text-align:center;

            }

            .box{

                width:250px;

                margin: auto;

            }

            .item{

                border-style: solid;

                border-color: #d4d4d9;

                -o-border-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAUAAAAFAQMAAAC3obSmAAAABlBMV…k1vE5IAAAAAXRSTlMAQObYZgAAAA5JREFUCNdj+MHQAYY/ABGyA4nEIg1TAAAAAElFTkSuQmCC)  stretch;

                border-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAUAAAAFAQMAAAC3obSmAAAABlBMV…k1vE5IAAAAAXRSTlMAQObYZgAAAA5JREFUCNdj+MHQAYY/ABGyA4nEIg1TAAAAAElFTkSuQmCC)  stretch;

                border-width:   1px;

                display: flex;

                align-items: center;

                position: relative;

            }

            .item input{

                    width: %;

                    height: 55px;

                    padding: 18px  ;

                    font-size: 15px;

                    box-sizing: border-box;

                    display: block;

                    position: relative;

                    z-index: ;

                    background-color: transparent; //如果一个元素覆盖在另外一个元素之上，而你想显示下面的元素，这时你就需要把上面这个元素的background设置为transparent

                    border: ;

                    outline:;

            }

            .item .placeholder{

                width: %;

                color: #ccc;

                font-size: 15px;

                position: absolute;

                left: ;

                top: %;

                transform: translateY(-%) scale();

                transition: transform .2s linear;

                transform-origin: left;

            }

        </style>

        <script>

            function xx(e){

                e.nextElementSibling.style.cssText='transform:translateY(-110%) scale(.75);';

            }

            function yy(e){

                e.nextElementSibling.style.cssText='';

            }

        </script>

    </head>

    <body>

        <div class="box">

            <h3>登录</h3>

            <div class="item">

                <input type="text" onfocus="xx(this)" onblur="yy(this)"/>

                <span class="placeholder">请输入用户名</span>

            </div>

            <div class="item">

                <input type="text" onfocus="xx(this)" onblur="yy(this)"/>

                <span class="placeholder">请输入密码</span>

            </div>

        </div>

    </body>

</html>

css3的transform，translate和transition之间的区别与作用的更多相关文章

  1. CSS3：transform translate transition 这些都是什么？

    transform:一个属性名称,即CSS3 2D转换 属性. translate:一个属性函数,用法是translate(dx,dy) div { transform: translate(50px ...

  2. css3 变形(transform)、转换(transition)和动画(animation)

    http://www.w3cplus.com/content/css3-transform/  在CSS3中transform主要包括以下几种:旋转rotate.扭曲skew.缩放scale和移动tr ...

  3. 自己总结的CSS3中transform变换、transition过渡、animation动画的基本用法

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8&quo ...

  4. this.setData ， that.setData ， this.data.val三者之间的区别和作用

    1.this.setData({ }) <view bindtouchmove="tap_drag" bindtouchend="tap_end" bin ...

  5. 父节点使用css的transform: translate(0, 0)时position:fixed在chrome浏览器中无效

    今天在做移动端的页面,无意间发现了一个Chrome浏览器下的一个bug,在使用CSS3的transform: translate(0, 0)属性对节点A进行位置转化,此时A节点下面有一个字节点B,节点 ...

  6. CSS3中很容易混淆的transform,translate,transition。如何去区分，以及综合写法。

    属性 含义     transition(过渡) 用于设置元素的样式过度,和animation有着类似的效果,但细节上有很大的不同 transform(变形) 用于元素进行旋转.缩放.移动或倾斜,和设 ...

  7. css3中的translate,transform,transition的区别

    translate:移动,transform的一个方法               通过 translate() 方法,元素从其当前位置移动,根据给定的 left(x 坐标) 和 top(y 坐标) ...

  8. CSS3的变形transform、过渡transition、动画animation学习

    学习CSS3动画animation得先了解一些关于变形transform.过渡transition的知识 这些新属性大多在新版浏览器得到了支持,有些需要添加浏览器前缀(-webkit-.-moz-.- ...

  9. CSS3属性transform详解之（旋转:rotate,缩放:scale,倾斜:skew,移动:translate）

    CSS3属性transform详解之(旋转:rotate,缩放:scale,倾斜:skew,移动:translate)   在CSS3中,可以利用transform功能来实现文字或图像的旋转.缩放.倾 ...

随机推荐

  1. 利用sqlmap注入测试

    安装:yum install -y gitcd /usr/local && git clone https://github.com/sqlmapproject/sqlmap.gitc ...

  2. MySQL应用异常问题解决

    MySQL错误:Every derived table must have its own alias 派生表都必须有自己的别名 一般在多表查询时,会出现此错误. 因为,进行嵌套查询的时候子查询出来的 ...

  3. 对线性回归，logistic回归和一般回归

    对线性回归,logistic回归和一般回归 [转自]:http://www.cnblogs.com/jerrylead JerryLead 2011年2月27日 作为一个机器学习初学者,认识有限,表述 ...

  4. 一起学Hive——总结复制Hive表结构和数据的方法

    在使用Hive的过程中,复制表结构和数据是很常用的操作,本文介绍两种复制表结构和数据的方法. 1.复制非分区表表结构和数据 Hive集群中原本有一张bigdata17_old表,通过下面的SQL语句可 ...

  5. 使用java操作kudu

    使用maven导入kudu <dependency> <groupId>org.apache.kudu</groupId> <artifactId>ku ...

  6. eclipse发布web

    elipse集成tomcat 在实际开发中通常在eclipse中集成tomcat,这样在开发中更方便一些.打开eclipse,选择界面下方的servers选项,点击no servers are ava ...

  7. cropper.js图片裁剪

    最近做电子名片的项目,可是个人照片展示上出现了 用户上传的图片尺寸严重失调,所以要求进行图片裁剪,再此我对图片裁剪进行调研 还不太成熟 以后再改 这个实现的原理是 前台获取到 坐标 图片的尺寸 原图文 ...

  8. Java基础总结02：环境变量的配置

    (一)Windows系统下配置环境变量 ※在"系统变量"中设置3项属性JAVA_HOME.PATH.CLASSPATH(JDK1.5之后此项属性不必再配),若已存在则点击" ...

  9. Jenkins的介绍

    在公司看见有的部门在使用这个工具,好奇一下,今天就开始学习一番. 1.官网 https://jenkins.io/ 2.介绍 Jenkins是一个功能强大的应用程序,允许持续集成和持续交付项目,无论用 ...

  10. Url地址重写

    一 什么是url重写URL 重写是截取传入 Web 请求并自动将请求重定向到其他 URL 的过程.比如浏览器发来请求 hostname/101.aspx ,服务器自动将这个请求中定向为http://h ...