2D转换方法：transform()、rotate()、scale()、skew()、matrix()

3D转换方法：rotateX()、rotateY()

1.示例代码

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>2D、3D转换</title>
<style>
section{width: 200px;height: 200px;background-color: red;}
/*.then{*/
/*transform: translate(100px,100px);*/
/*-moz-transform: translate(100px,100px);!*Firefox*!*/
/*-webkit-transform: translate(100px,100px);!*Chrome、Safari*!*/
/*-o-transform: translate(100px,100px);!*Opera*!*/
/*-ms-transform: translate(100px,100px);!*IE*!*/
/*}*/
/*.then{transform: rotate(100deg);*/
/*-moz-transform: rotate(100deg);*/
/*-webkit-transform: rotate(100deg);*/
/*-o-transform: rotate(100deg);*/
/*-ms-transform: rotate(100deg);*/
/*}*/
/*.then{transform: scale(1.2,1.2);!*宽度、高度倍数*!*/
/*-moz-transform: scale(1.2,1.2);*/
/*-webkit-transform: scale(1.2,1.2);*/
/*-o-transform: scale(1.2,1.2);*/
/*-ms-transform: scale(1.2,1.2);*/
/*position: relative;*/
/*left: 300px;*/
/*}*/
/*.then{*/
/*transform: skew(20deg,20deg);!*x,y倾斜角度*!*/
/*-moz-transform: skew(20deg,20deg);*/
/*-webkit-transform: skew(20deg,20deg);*/
/*-o-transform: skew(20deg,20deg);*/
/*-ms-transform: skew(20deg,20deg);*/
/*position: relative;*/
/*left: 10px;*/
/*}*/
/*.then{*/
/*transform: rotateX(150deg);*/
/*-moz-transform: rotateX(150deg);*/
/*-webkit-transform: rotateX(150deg);*/
/*-o-transform: rotateX(150deg);*/
/*-ms-transform: rotateX(150deg);*/
/*}*/
.then{
transform: rotateY(150deg);
-moz-transform: rotateY(150deg);
-webkit-transform: rotateY(150deg);
-o-transform: rotateY(150deg);
-ms-transform: rotateY(150deg);
}
</style>
</head>
<body>
<section></section><br/>
<section class="then"></section>
</body>
</html>

2.示例效果图

图1：

sco

图2：

图3：

图4：

图5：

CSS3 2D、3D转换的更多相关文章

  1. CSS自学笔记（13）:CSS3 2D/3D转换

    CSS3中新增了对元素进行2D和3D的转换效果,这样可以是开发人员很方便的做出视觉效果更好的网页来. 通过CSS3中属性的定义,我们可以对元素进行移动.缩放.拉伸.旋转等等,可以通过定义transfo ...

  2. 前端笔记之HTML5&CSS3（下）2D/3D转换&animate动画

    一.2D转换(transform) CSS3中的transform转换和PS中的变换是一样的,分别有:缩放.位移.斜切.旋转 1.1 transform:scale()缩放 transform:sca ...

  3. CSS3中2D/3D转换、过渡、动画

    转换.过渡.动画 2D 转换 1.translate() 方法 通过 translate() 方法,元素从其当前位置移动,根据给定的 left(x 坐标) 和 top(y 坐标) 位置参数: 实例 d ...

  4. HTML5和CSS3实现3D转换效果 CSS3的3D效果

    上次,我们一起研究了css3的2d模块,这次我们一起来看一下css3的3d模块. 首先,我们来了解一下3d的坐标系,x轴在屏幕上为水平方向,y轴为垂直方向,而z轴为垂直于屏幕的方向. 不理解的话可以参 ...

  5. CSS3：3D转换

    几个突破口:(为了更简洁理解,先忽略兼容) 1.认识3D的坐标系 rotateX()-----------元素绕X轴旋转 rotateY() -----------元素绕Y轴旋转 rotateZ() ...

  6. CSS3实现3D转换

    实现效果: 当鼠标悬停在图片上面时,图片发生翻转,文案出来,鼠标取消之后就又恢复 实现代码: <!DOCTYPE html> <html lang="en"> ...

  7. CSS3常用属性(边框、背景、文本效果、2D转换、3D转换、过渡、有过渡效果大图轮播、动画)

    CSS3边框: 1.CSS3圆角:border-radius  属性--创建边框线的圆角 <body style="font-size:24px; color:#60F;"& ...

  8. CSS笔记（十二）CSS3之2D和3D转换

    参考:http://www.w3school.com.cn/css3/css3_2dtransform.asp 2D Transform 方法 函数 描述 matrix(n,n,n,n,n,n) 定义 ...

  9. css3 2d转换3d转换以及动画的知识点汇总

    css3 2d转换 2d转换的方法: 1.移动 translate(x, y) 可以改变元素的位置,x.y可为负值: 2.缩放 scale(x, y) 可以对元素进行水平和垂直方向的缩放,x.y的取值 ...

  10. css3动画2D、3D转换

    css3动画的2D.3D转换代码: <!DOCTYPE html> <html lang="en"> <head> <meta chars ...

随机推荐

  1. linux下qt的安装

    2.1环境的搭建 linux-> 2.1.1 ./qt-opensource-linux-x86-5.5.0.run 2.1.2 vim /etc/profile (.bashrc) expor ...

  2. Centos 7系统优化脚本

    脚本如下,后续继续优化 #!/bin/bash #author junxi by #this script is only for CentOS 7.x #check the OS platform= ...

  3. openvpn 客户端一键脚本安装

    #!/bin/bash dir=/etc/openvpn#file=AD00012basepath=$(cd `dirname $0`; pwd)PACKAGE_DIR="${basepat ...

  4. PHPUnit-附录 B. 标注

    [http://www.phpunit.cn/manual/5.7/zh_cn/appendixes.annotations.html] 所谓标注,是指某些编程语言中允许加在源代码中的一种特殊格式的语 ...

  5. 在linux内核中修改TCP MSS值

    MTU: Maxitum Transmission Unit 最大传输单元 MSS: Maxitum Segment Size 最大分段大小 MSS最大传输大小的缩写,是TCP协议里面的一个概念.MS ...

  6. map,vector 等容器内容的循环删除问题(C++)

    map,vector 等容器内容的循环删除问题(C++) map,vector等容器的循环删除不能用普通的方法删除: for(auto p=list.begin();p!=list.end();p++ ...

  7. EntityFrameWork实现部分字段获取和修改(含源码)

    EntityFrameWork类库,是微软推出的ORM组件,它是基于Ado.Net的,个人感觉还是非常 好用的.以下介绍的2个功能点分别是部分字段更新和获取 解决部分字段Update.本方案采用仓储模 ...

  8. C#仪器数据文件解析-PDF文件

    不少仪器工作站输出的数据报告文件为PDF格式,PDF格式用于排版打印,但不易于数据解析,因此解析PDF数据需要首先读取到PDF文件中的文本内容,然后根据内容规则解析有意义的数据信息. C#解析PDF文 ...

  9. 又是一个愚蠢的错误，皆因.xml而起

       论java中的.xml到底有多坑?! 感觉自己都快哭了,再一次被.xml给坑了一下,这次坑的太狠了,一下子导致自己浪费了昨天一下午,一晚上,今天一上午和半个下午呀,中间的过程真的是乏善可陈呀,各 ...

  10. Android 如何进行页面传递对象

    当我们从一个页面调到另一个页面的时候,需要把该页面的一些设定值也传递给下一个页面.当要传递的值很多时,我们可以传递一个对象. 页面1: Intent intent = new Intent(PageO ...