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. 图像转换为二进制文件存入DSP6748

    本文为原创作品,转载请注明出处 欢迎关注我的博客:http://blog.csdn.net/hit2015spring和http://www.cnblogs.com/xujianqing/ 这篇博客主 ...

  2. 让Playground支持UIKit框架

    http://blog.diveinedu.cn/playground_uikit_ios/ 让Playground支持UIKit框架 发表于 作者 排云鹤 — 暂无评论 ↓ Xcode 6新增了Pl ...

  3. Linux c括号作用域【原创笔记】

    大师指点后,所做的笔记,很感谢一起愿意研究技术的同事,以下不是本人原创,是他分析的成果 #include <stdio.h> #include <time.h> struct ...

  4. linux进程的休眠（等待队列）【转】

    转自:http://www.cnblogs.com/noaming1900/archive/2011/01/14/1935526.html (转载) bojan 收录于2010-10-09 阅读数:  ...

  5. Linux下查看使用的是哪种shell的方法汇总【转】

    转自:http://www.jb51.net/LINUXjishu/247797.html 查看当前发行版可以使用的shell 复制代码 代码如下: [root@localhost ~]$ cat / ...

  6. DRF最高封装的子类视图

    # 转载请留言联系 子类视图: 视图 作用 方法 父类 ListAPIView 查询多条数据 get GenericAPIView ListModelMixin CreateAPIView 新增一条数 ...

  7. Spring boot集成redis初体验

    pom.xml: <?xml version="1.0" encoding="UTF-8"?> <project xmlns="ht ...

  8. 怎么将string list 转成有特殊字符分开字符串

    https://stackoverflow.com/questions/4021851/join-string-list-elements-with-a-delimiter-in-one-step Y ...

  9. 安装配置Elasticserch的方法

    1.安装java环境 先查看环境是否安装 yum list installed |grep java 如果存在自带的环境则卸载 yum -y remove java--openjdk* 查看安装包 y ...

  10. hdu6166

    hdu6166 题意 给出一个有向图,选择 \(k\) 个点,问这 \(k\) 个点任意两点距离的最小值. 分析 按结点编号的二进制位,每次可以把所有点分到两个集合,那么求两个集合的点间的最短路即可( ...