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元素旋转、缩放、移动或倾斜的更多相关文章

CSS3实现元素旋转
-webkit-transform:rotate(30deg); 参数代表顺时针自旋转角度这个元素还提供了文本倾斜的方法 - HTML5与CSS3 P299
CSS3制作旋转导航
慕课网学习CSS3时,遇到个习题,觉得有必要总结学习下:CSS3制作旋转导航慕课网习题地址:http://www.imooc.com/code/1883 示例及源码地址:http://codepen ...
css3制作旋转动画
现在的css3真是强大,之前很多动画都是用jq来实现,但是css3制作的动画要比jq实现起来简单很多,今天呢,我自己也写了一个css旋转动画和大家分享.效果如下面的图片思路:1.制作之前呢,我们先来 ...
CSS3 3D旋转下拉菜单--兼容性不太好
<!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <m ...
CSS3动画旋转——（图片360°旋转）
今天在重构网页特效的时候,想着用到一个css3的旋转特效.简单来一个demo. html <div class="box"> <img src="./y ...
osg矩阵变换节点-----平移旋转缩放
osg矩阵变换节点-----平移旋转缩放转自:http://www.cnblogs.com/ylwn817/articles/1973396.html 平移旋转缩放这个三个是osg矩阵操作中,最常见 ...
纯css3实现旋转的太极图
效果图: 代码如下: <!DOCTYPE html> <html> <head lang="zh"> <meta charset=&quo ...
osg中使用MatrixTransform来实现模型的平移/旋转/缩放
osg中使用MatrixTransform来实现模型的平移/旋转/缩放转自:http://www.cnblogs.com/kekec/archive/2011/08/15/2139893.html# ...
CSS3实现旋转的太极图（二）：只用1个DIV
效果预览: PS: 1.昨天用3个DIV实现了太极图(点击查看),,今天试着用1个Div来做. 2.公司刚忙过双10周年庆,最近空闲下来,闲着也是闲着,总得写点东西吧. 3.高手莫喷,小弟仅仅是没 ...

随机推荐

170503、centos6.5安装mysql5.6.30
准备:虚拟机地址:192.168.0.110 安装目录/usr/local/ 首先卸载已经安装的mysql使用命令查看rpm -qa | grep mysql卸载使用 rpm -e xxx 或者 yu ...
沈阳网络赛D-Made In Heaven【k短路】【模板】
One day in the jail, F·F invites Jolyne Kujo (JOJO in brief) to play tennis with her. However, Pucci ...
【Python】如何取到input中的value值？
练习:取到下方链接下所有海贼王的下载链接. # coding=utf-8 from selenium import webdriver from time import sleep import ke ...
c primer plus(五版)编程练习-第八章编程练习
1.设计一个程序,统计从输入到文件结尾为止的字符数. #include<stdio.h> int main(void){ int ch; int i; i=; while((ch = ge ...
Alpine Linux配置使用技巧【一个只有5M的操作系统（转）】
Alpine Linux是一个面向安全应用的轻量级Linux发行版.它采用了musl libc和busybox以减小系统的体积和运行时资源消耗,同时还提供了自己的包管理工具apk. Alpine Li ...
【Cocos2dx3.x Lua】图片异步加载
一.说明异步加载就是把消耗程序时间比较大的加载操作放到其他线程中,待加载完毕后通过回调函数的方式通知主线程. addImageAsync函数实现(Cocos2dx 3.3) Link: ...
testng日志和报告
TestNG是通过 Listeners 或者 Reporters 生成测试报告. Listeners,即 org.testng.ITestListener 的实现,能够在测试执行过程中发出各种测试结果 ...
java之标记型接口Cloneable
1.克隆用途. Cloneable和Serializable一样都是标记型接口,它们内部都没有方法和属性,implements Cloneable表示该对象能被克隆,能使用Object.clone() ...
ruby on rails validates
validates :conclusion, :presence => true, :inclusion => { :in => [0,1] } validates :email, ...
[one day one question] 部分ios版本在display: inline-block时候不支持flex
问题描述: 部分ios 在display: inline-block时候不支持flex,这怎么破? 解决方案: so easy,不要使用display: inline-block;就行啦君生我未生, ...

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

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

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

随机推荐

热门专题