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. CentOS 7 部署nginx

    **二进制安装 安装Nginx源 rpm -ivh http://nginx.org/packages/centos/7/noarch/RPMS/nginx-release-centos-7-0.el ...

  2. 6.shell判断语句

    [ condition ](注意condition前后要有空格),可以使用$?验证(0为true,>1为false) 两个整数的比较:=:字符串比较-lt:小于-gt:大于-le:小于等于-ge ...

  3. hdu 3768(spfa+暴力)

    Shopping Time Limit: 10000/5000 MS (Java/Others)    Memory Limit: 32768/32768 K (Java/Others)Total S ...

  4. django 实现自定义认证

    1.Django自带用户认证系统 Django自带用户认证系统,这个系统支持访问控制.注册用户.关联创建者和内容等:在开发用户认证功能时的时候,可以使用Django自带用户认证系统实现: A.相关表 ...

  5. JS动态计算移动端rem的解决方案

    首先介绍下rem 说起rem就的说px,em: PX为单位 在Web页面初期制作中,我们都是使用“px”来设置我们的文本,因为他比较稳定和精确.但是这种方法存在一个问题,当用户在浏览器中浏览我们制作的 ...

  6. 计蒜客 1460.Ryuji doesn't want to study-树状数组 or 线段树 (ACM-ICPC 2018 徐州赛区网络预赛 H)

    H.Ryuji doesn't want to study 27.34% 1000ms 262144K   Ryuji is not a good student, and he doesn't wa ...

  7. [Atcoder Regular Contest 063] Tutorial

    Link: ARC063 传送门 C: 将每种颜色的连续出现称为一段,寻找总段数即可 #include <bits/stdc++.h> using namespace std; ,len; ...

  8. HDU 2819 Swap（二分图匹配）

    [题目链接] http://acm.hdu.edu.cn/showproblem.php?pid=2819 [题目大意] 给出一个棋盘,由白格子和黑格子组成,可以交换棋盘的行列, 使得其主对角线为黑格 ...

  9. [Contest20171102]简单数据结构题

    给一棵$n$个点的数,点权开始为$0$,有$q$次操作,每次操作选择一个点,把周围一圈点点权$+1$,在该操作后你需要输出当前周围一圈点点权的异或和. 由于输出量较大,设第$i$个询问输出为$ans_ ...

  10. 【树状数组】Gym - 101147J - Whistle's New Car

    题意就是对每个点i,统计在其子树内(不含自身),且depj-depi<=xj的点有多少个. 把点分别按照dep-x和dep进行排序,离线处理, 每次把dep-x小于等于当前dep值的点插入树状数 ...