CSS3元素旋转、缩放、移动或倾斜

代码：

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Document</title>

    <style type="text/css">

        *{

            margin: 0;

            padding: 0;

        }

        .container{

            width: 900px;

            margin:0 auto;

        }

        header{

            text-align: center;

            line-height: 60px;

        }

        section{

            width: 200px;

            height: 200px;

            border:2px solid #ddd;

            float: left;

            margin:10px;

            border-radius: 10px;

            background: #fff;

            position: relative;

        }

        section h3{

            width: 200px;

            height: 200px;

            text-align: center;

            line-height: 120px;

            color: blue;

            background: rgba(0,0,0,0.1);

            border-radius: 10px;

            display: none;

            position: absolute;

            top:0;

            left:0;

            z-index: 9;

        }

        section:hover h3{

            display: block;

        }

        .content{

            width: 100px;

            height: 100px;

            margin:50px;

            border-radius: 10px;

            background-image: linear-gradient(pink,gray);

            transition: all 1s linear;

        }

        .box{

            width: 100px;

            height: 100px;

            background: gray;

            border-radius: 10px;

            transition: all 1s linear;

        }

        .item:nth-of-type(1):hover .content{

            transform:translate(50px,50px);

        }

        .item:nth-of-type(2):hover .content .box{

            transform:translateX(50px);

        }

        .item:nth-of-type(3):hover .content .box{

            transform:translateY(50px);

        }

        .item:nth-of-type(4):hover .content .box{

            transform:perspective(300px) translateZ(-100px);

        }

        .item:nth-of-type(5):hover .content{

            /*默认顺时针旋转,旋转中心为当前元素中心点*/

            transform:rotate(360deg);

            /*设置当前元素旋转中心点*/

            /*transform-origin: 0 0;*/

        }

        .item:nth-of-type(6):hover .content{

            transform:rotateX(360deg);

        }

        .item:nth-of-type(7):hover .content{

            transform:rotateY(360deg);

        }

        .item:nth-of-type(8):hover .content{

            transform:rotateZ(360deg);

        }

        .item:nth-of-type(9):hover .content{

            transform:skew(60deg,60deg);

        }

        .item:nth-of-type(10):hover .content{

            transform:scale(1.5,1.5);

        }

        .item:nth-of-type(11):hover .content{

            transform:scaleX(2);

        }

        .item:nth-of-type(12):hover .content{

            transform:scaleY(2);

        }

        .item:nth-of-type(13):hover .content{

            /*在z轴上的位置已经按照z轴进行了缩放 - 它看起来更接近你，因此更大，但是实际的尺寸（宽度和高度）不变。*/

            transform:perspective(300px) translateZ(-100px);

        }

        .item:nth-of-type(14):hover .content{

            /*在z轴上的位置已经按照z轴进行了缩放 - 它看起来更接近你，因此更大，但是实际的尺寸（宽度和高度）不变。*/

            transform:perspective(300px) scaleZ(10) translateZ(-100px);

        }

        .item:nth-of-type(15):hover .content{

            transform:perspective(100px) rotateX(360deg);

        }

        .item:nth-of-type(16):hover .content{

            transform:perspective(100px) rotateY(360deg);

        }

    </style>

</head>

<body>

<div class="container">

    <header>

        <h2>transform属性</h2>

    </header>

    <section class="item">

        <h3>translate平移2D</h3>

        <div class="content"></div>

    </section>

    <section class="item">

        <h3>translateX</h3>

        <div class="content">

            <div class="box"></div>

        </div>

    </section>

    <section class="item">

        <h3>translateY</h3>

        <div class="content">

            <div class="box"></div>

        </div>

    </section>

    <section class="item">

        <h3>translateZ</h3>

        <div class="content">

            <div class="box"></div>

        </div>

    </section>

    <section class="item">

        <h3>rotate旋转</h3>

        <div class="content"></div>

    </section>

    <section class="item">

        <h3>3D旋转 rotateX()</h3>

        <div class="content"></div>

    </section>

    <section class="item">

        <h3>3D旋转 rotateY()</h3>

        <div class="content"></div>

    </section>

    <section class="item">

        <h3>3D旋转 rotateZ()</h3>

        <div class="content"></div>

    </section>

    <section class="item">

        <h3>3D翻转 skew()</h3>

        <div class="content"></div>

    </section>

    <section class="item">

        <h3>放大 scloe()</h3>

        <div class="content"></div>

    </section>

    <section class="item">

        <h3>X轴放大 scaleX()</h3>

        <div class="content"></div>

    </section>

    <section class="item">

        <h3>Y轴放大 scaleY()</h3>

        <div class="content"></div>

    </section>

    <section class="item">

        <h3>Z轴放大缩小(右边对比图)</h3>

        <div class="content"></div>

    </section>

    <section class="item">

        <h3>Z轴放大缩小(越近越大,越远越小) scaleZ()</h3>

        <div class="content"></div>

    </section>

    <section class="item">

        <h3> 3D透视图perspective(n) X轴旋转</h3>

        <div class="content"></div>

    </section>

    <section class="item">

        <h3> 3D透视图perspective(n) Y轴旋转</h3>

        <div class="content"></div>

    </section>

</div>

</body>

</html>

实现效果：

【Demo】CSS3元素旋转、缩放、移动或倾斜的更多相关文章

  1. CSS3实现元素旋转

    -webkit-transform:rotate(30deg); 参数代表顺时针自旋转角度 这个元素还提供了文本倾斜的方法 - HTML5与CSS3 P299

  2. CSS3制作旋转导航

    慕课网学习CSS3时,遇到个习题,觉得有必要总结学习下:CSS3制作旋转导航 慕课网习题地址:http://www.imooc.com/code/1883 示例及源码地址:http://codepen ...

  3. css3制作旋转动画

    现在的css3真是强大,之前很多动画都是用jq来实现,但是css3制作的动画要比jq实现起来简单很多,今天呢,我自己也写了一个css旋转动画和大家分享.效果如下面的图片 思路:1.制作之前呢,我们先来 ...

  4. CSS3 3D旋转下拉菜单--兼容性不太好

    <!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <m ...

  5. CSS3动画旋转——（图片360°旋转）

    今天在重构网页特效的时候,想着用到一个css3的旋转特效.简单来一个demo. html <div class="box"> <img src="./y ...

  6. osg矩阵变换节点-----平移旋转缩放

    osg矩阵变换节点-----平移旋转缩放 转自:http://www.cnblogs.com/ylwn817/articles/1973396.html 平移旋转缩放这个三个是osg矩阵操作中,最常见 ...

  7. 纯css3实现旋转的太极图

    效果图: 代码如下: <!DOCTYPE html> <html> <head lang="zh"> <meta charset=&quo ...

  8. osg中使用MatrixTransform来实现模型的平移/旋转/缩放

    osg中使用MatrixTransform来实现模型的平移/旋转/缩放 转自:http://www.cnblogs.com/kekec/archive/2011/08/15/2139893.html# ...

  9. CSS3实现旋转的太极图（二）：只用1个DIV

    效果预览:   PS: 1.昨天用3个DIV实现了太极图(点击查看),,今天试着用1个Div来做. 2.公司刚忙过双10周年庆,最近空闲下来,闲着也是闲着,总得写点东西吧. 3.高手莫喷,小弟仅仅是没 ...

随机推荐

  1. SQL Fundamentals:替代变量（&，&&)以及DEFINE,UNDEFINE,ACCEPT指令

    替代变量 利用替代变量可以实现数据操作的交互性.替代变量的操作类似于键盘输入操作. 所谓的替代变量,指的就是在进行查询或更新操作时,某些数据是由用户所输入的,而这些数据前可以使用“&”标记. ...

  2. 双态运维：如何让CMDB配置维护更贴近人性

    近来很多行业内的大佬关于CMDB连连发声,CMDB的关注度持续高涨,CMDB的前生就是长满雀斑的丑媳妇,扭扭捏捏不受待见这么多年,终于熬出头要见公婆了.哎,她的贤惠谁能懂? 言归正传,在拜读了多篇大牛 ...

  3. pandas 取消读取csv时默认第一行为列名

    读取时默认第一行为列名 此时DataFrame的列名为第一行数据: 因为第一行为有效数据,故不可作为列名,要么重新起列名,要么使用默认序列列名: 取消默认第一行为列名 给 pd.read_csv() ...

  4. layer官方演示与讲解（jQuery弹出层插件）

    1. 使用layer遇到困难?Fly社区虔诚为您解惑 2. layer 2.0 发布,以独立形式呈现的最后一个版本 3. Fork layer on Github,爱她,就给她加个星啵 当前版本:2. ...

  5. mydumper原理介绍

      mydumper的安装:http://www.cnblogs.com/lizhi221/p/7010174.html   mydumper介绍   MySQL自身的mysqldump工具支持单线程 ...

  6. zw版【转发·台湾nvp系列Delphi例程】HALCON SqrtImage

    zw版[转发·台湾nvp系列Delphi例程]HALCON SqrtImageHALCON SqrtImage 範例 (RAD Studio XE Delphi x64) zw版[转发·台湾nvp系列 ...

  7. composer方式安装thinkphp5,安装smarty

    转载地址: https://my.oschina.net/inuxor/blog/750717 composer 是 PHP 用来管理依赖(dependency)关系的工具.你可以在自己的项目中声明所 ...

  8. P3327/bzoj3994 [SDOI2015]约数个数和（莫比乌斯反演）

    P3327 [SDOI2015]约数个数和 神犇题解(转) 无话可补 #include<iostream> #include<cstdio> #include<cstri ...

  9. Ubuntu 16.04 (官方命令行)安装MongoDB 3.6.2(社区版)

    概述 使用本教程从 .deb 包在LTS Ubuntu Linux系统上安装MongoDB Community Edition. 虽然Ubuntu包含自己的MongoDB包,但官方的MongoDB社区 ...

  10. 一个好玩的CTF题

    一个CTF的题目,拿来学习学习 玩了好久,再加上学校一堆破事,最近又开始瞎弄了,找了几个CTF的题目,和别人写的一些内容,也当是学习,也当是看完之后的小结.顺便也说一下如果自己拿到这题目会从哪做起. ...