CSS3 transform变换

1、translate(x,y) 设置盒子位移
2、scale(x,y) 设置盒子缩放
3、rotate(deg) 设置盒子旋转
4、skew(x-angle,y-angle) 设置盒子斜切
5、perspective 设置透视距离
6、transform-style flat | preserve-3d 设置盒子是否按3d空间显示
7、translateX、translateY、translateZ 设置三维移动
8、rotateX、rotateY、rotateZ 设置三维旋转
9、scaleX、scaleY、scaleZ 设置三维缩放
10、tranform-origin 设置变形的中心点
11、backface-visibility 设置盒子背面是否可见

举例：（翻面效果）

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>翻面</title>

    <style type="text/css">

        .box{

            width:300px;

            height:272px;

            margin:50px auto 0;

            transform-style:preserve-3d;

            position:relative;

        }

        .box .pic{

            width:300px;

            height:272px;

            position:absolute;

            background-color:cyan;

            left:0;

            top:0;

            transform:perspective(800px) rotateY(0deg);

            backface-visibility:hidden;

            transition:all 500ms ease;

        }

        .box .back_info{

            width:300px;

            height:272px;

            text-align:center;

            line-height:272px;

            background-color:gold;

            position:absolute;

            left:0;

            top:0;

            transform:rotateY(180deg);

            backface-visibility:hidden;

            transition:all 500ms ease;

        }

        .box:hover .pic{

            transform:perspective(800px) rotateY(180deg);

        }

        .box:hover .back_info{

            transform:perspective(800px) rotateY(0deg);

        }

    </style>

</head>

<body>

    <div class="box">

        <div class="pic"><img src="data:images/location_bg.jpg"></div>

        <div class="back_info">背面文字说明</div>

    </div>

</body>

</html>

CSS3 transform变换的更多相关文章

  1. CSS3☞transform变换

    transform CSStransform属性允许你旋转,缩放,倾斜或平移给定元素.这是通过修改CSS视觉格式化模型的坐标空间来实现的. DEMO /* Keyword values */ tran ...

  2. 19 01 04 CSS3 圆角 grba(带通明的) tansition动画 transform变换 animation动画

    CSS3圆角 设置某一个角的圆角,比如设置左上角的圆角:border-top-left-radius:30px 60px; 同时分别设置四个角: border-radius:30px 60px 120 ...

  3. CSS3 transform对普通元素的N多渲染影响

    一.一入transform深似海 一个普普通通的元素,如果应用了CSS3 transform变换,即便这个transform属性值不会改变其任何表面的变化(如scale(1), translate(0 ...

  4. 好吧，CSS3 3D transform变换，不过如此！

    一.写在前面的秋裤 早在去年的去年,我就大肆介绍了2D transform相关内容.看过海贼王的都知道,带D的家伙都不是好惹的,2D我辈尚可以应付,3D的话,呵呵,估计我等早就在千里之外被其霸气震晕了 ...

  5. 关于CSS3中transform变换的小坑

    2017年6月30日15:05:46 今天在写一个demo的时候,发现CSS3中transform变换的一个特性. 首先,我先描述一下我发现的情况(问题再现): <div class=" ...

  6. 好吧，CSS3 3D transform变换，不过如此！——张鑫旭

    一.写在前面的秋裤 早在去年的去年,我就大肆介绍了2D transform相关内容.看过海贼王的都知道,带D的家伙都不是好惹的,2D我辈尚可以应付,3D的话,呵呵,估计我等早就在千里之外被其霸气震晕了 ...

  7. 第98天：CSS3中transform变换详解

    transform变换详解 本文主要介绍变形transform. Transform字面上就是变形,改变的意思.在CSS3中transform主要包括以下几种:旋转rotate.扭曲skew.缩放sc ...

  8. css3的transform变换scale和translate等影响jQuery的position().top和offset().top

    css3的transform变换scale和translate等影响jQuery的position().top和offset().top

  9. 详解如何用 CSS3 完成 3D transform变换

    Tips:阅读提示!!! 首先,本文针对的是3D transform变换的学习,所以你需要对 2D transform变换 有一定的了解 其次,需要说明的是,代码是一种需要自己不断实践的学科,建议各位 ...

随机推荐

  1. 使用dd命令克隆整个系统

    神奇的ghost的原理是什么呢?不就是数据复制吗?Linux下的dd命令不就是最强大的数据复制工具!          既然如此,我为什么要使用g4l这样复杂的工具呢?一条dd命令不就可以帮我实现任意 ...

  2. [FZU2254]英语考试

    在过三个礼拜,YellowStar有一场专业英语考试,因此它必须着手开始复习. 这天,YellowStar准备了n个需要背的单词,每个单词的长度均为m. YellowStar准备采用联想记忆法来背诵这 ...

  3. Codeforces 940F Machine Learning 带修改莫队

    题目链接 题意 给定一个长度为\(n\)的数组\(a\),\(q\)个操作,操作分两种: 对于区间\([l,r]\),询问\(Mex\{c_0,c_1,c_2,⋯,c_{10^9}\}\),其中\(c ...

  4. 编写类du命令Python脚本

    #!/usr/bin/env python #_*_ coding:utf-8 _*_ #计算整个目录的大小,脚本接受-H参数,来加上适当的单位 #功能像du看齐 import os,sys from ...

  5. (二十八)fopen与读写的标识r,r+,rb+,rt+,w+.....

    fopen与读写的标识r,r+,rb+,rt+,w+..... 函数简介 函数功能: 打开一个文件 函数原型:FILE * fopen(const char * path,const char * m ...

  6. udp端口测试连接

    udp端口测试连接 http://www.361way.com/nc-udp-port/2949.html

  7. 使用Windows下的git工具往github上传代码 踩坑记录

    使用Windows下的git工具往github上传代码 踩坑记录 背景 由于以前接触的项目都是通过svn进行版本控制,现在公司项目使用git,加上自己平时有一个练手小项目,趁着周末试着把项目上传到自己 ...

  8. Java常见知识点（一）

    1.+不仅可作为加法运算符使用,还可作为字符串连接运算符使用.   2.a = b = c = 7;//虽然java支持这种一次为多个变量赋值的写法,但这种写法导致程序的可读性降低,因此不推荐这样写. ...

  9. JavaScript的条件运算符与条件语句

    1.条件运算符 比较运算符 ==    判断左右两边数据的值是否相等 ===   判断左右两边数据的之是否相等,同时还判断两边的数据类型是否一样 !=  比较运算符的比较结果都是布尔值,true或者f ...

  10. win7或win2008系统中，出现【已停止工作,联机检查解决方案并关闭该程序,关闭程序】解决方法！

    win7或win2008系统中,出现[已停止工作,联机检查解决方案并关闭该程序,关闭程序]解决方法! 经过摸索,点击[控制面板]-[操作中心]-[更改操作中心设置]-[问题报告设置]-[从不检查解决方 ...