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. List<Map<String, Object>> 与 json 互转

    近期做指纹识别,需要用到缓存文件,数据量并不大,用redis不合适,所以用到了txt文件. 思路是 1.定时查询指纹,存到txt缓存文件中.      2.新增或删除指纹时,查询指纹,存到txt缓存文 ...

  2. 删除 oracle

    C:\app\Administrator\product\11.2.0\client_1\deinstall 用这个批处理文件,会把oracle全部删除,除这个目录本身以外 .另外它不删除服务,即使服 ...

  3. yum localinstall 安装mysql8.0

    MySQL :: MySQL 8.0 Reference Manual :: 2.5.1 Installing MySQL on Linux Using the MySQL Yum Repositor ...

  4. 数字签名中公钥和私钥是什么?对称加密与非对称加密,以及RSA的原理

    http://baijiahao.baidu.com/s?id=1581684919791448393&wfr=spider&for=pc https://blog.csdn.net/ ...

  5. C#桌面程序设计复习

    GGG //屏幕高度 int ScreenH = 1080; this.Location = new Point(this.Location.X, ScreenH - this.Height - 20 ...

  6. PostgreSQL数据库的安装与PostGIS的安装(转)

    原文:http://lovewinner.iteye.com/blog/1490915 安装postgresql sudo apt-get install postgresql-9.1 postgre ...

  7. 第一课:初识Hadoop

    Hadoop核心组件之分布式文件系统HDFS: 特点:扩充性,容错性,海量数据存储. 在HDFS中每次上传文件,都会将文件切分成指定大小的数据块(默认128m)并以多副本的存储在多个机器上. 数据切分 ...

  8. OC最基础的系统转场动画

    SystemAnimationViewController *system = [SystemAnimationViewController new]; CATransition *animation ...

  9. [py]类属性和实例属性

    默认类和实例的内置属性一致 class A: """测试类""" name = "maotai" def __init_ ...

  10. 统计编程的框架与R语言统计分析基础——摘(2)统计分析之线性回归

    一.线性回归 1.简单线性回归 a. > x = women > x height weight 1 58 115 2 59 117 3 60 120 4 61 123 5 62 126 ...