css2d 3d

2D转换

1、rotate() 旋转

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>

</body>
</html>

2、scale() 放大或缩小

<!DOCTYPE html>

<html>

    <head>

        <meta charset="UTF-8">

        <title></title>

    </head>

    <body>

        <div style="width: 200px;height: 200px;background: blue;margin: 100px auto;"></div><!--这是一个参照物-->

        <div style="width: 200px;height: 200px;background: red;margin: 100px auto; transform: scale(1.3,1.2);"></div><!--两个值,分别是x,y正数就是放大,负数就是缩小-->

    </body>

</html>

3、skew() 倾斜

<!DOCTYPE html>

<html>

    <head>

        <meta charset="UTF-8">

        <title></title>

    </head>

    <body><>

        <div style="width: 200px;height: 200px;background: red;margin: 100px auto; transform:skew(30deg,20deg);"></div><!--两个值分别为x,y轴,值为负数时,方向就反方向-->

    </body>

</html>

4、matrix() matrix 方法有六个参数，包含旋转，缩放，移动（平移）和倾斜功能

<!DOCTYPE html>

<html>

    <head>

        <meta charset="UTF-8">

        <title></title>

    </head>

    <body>

                <div style="width: 200px;height: 200px;background: blue;margin: 100px auto;">我是参照物</div>

        <div style="width: 200px;height: 200px;background: red;border:1px solid black;margin: 100px auto; transform:matrix(0.866,0.5,-0.5,0.866,0,0);">旋转，缩放，移动（平移）和倾斜功能</div>
　　　　　　　　　　　　　　　　　　　　　　　　　　　　<!--这个方式是,把就六种方法集合在一起展示-->

    </body>

</html>

5、translate()

<!DOCTYPE html>

<html>

    <head>

        <meta charset="UTF-8">

        <title></title>

    </head>

    <body>

        <div style="width: 200px;height: 200px;background: blue;margin: 100px auto;">我是参照物</div>

        <div style="width: 200px;height: 200px;background: red;border:1px solid black;margin: 100px auto; transform: translate(50px,100px);"></div>

　　　　　　　　<!--根据左(X轴)和顶部(Y轴)位置给定的参数，从当前元素位置移动-->    
</body>

</html>

3D转换

1、rotateX() X轴旋转

<!DOCTYPE html>

<html>

    <head>

        <meta charset="UTF-8">

        <title></title>

    </head>

    <body>

         <div style="width: 200px;height: 200px;background: blue;margin: 100px auto;">我是参照物</div>

        <div style="width: 200px;height: 200px;background: red;border:1px solid black;margin: 100px auto;transform:rotateX(120deg);">哈哈哈哈哈哈哈哈哈哈哈哈哈哈好搞笑啊</div>

　　　　　　<!--是围绕本身在一个给定度数X轴旋转的元素-->   
 </body>

</html>

2、rotate（） Y轴旋转

<!DOCTYPE html>

<html>

    <head>

        <meta charset="UTF-8">

        <title></title>

    </head>

    <body>

        <div style="width: 200px;height: 200px;background: blue;margin: 100px auto;">我是参照物</div>

        <div style="width: 200px;height: 200px;background: red;border:1px solid black;margin: 100px auto;transform:rotateY(120deg);">哈哈哈哈哈哈哈哈哈哈哈哈哈哈好搞笑啊</div>

   　　<!--是围绕本身在一个给定度数Y轴旋转的元素-->

 </body>

</html>

过渡

1、transition 效果的持续时间

<!DOCTYPE html>

<html>

<head>

<meta charset="utf-8">

<title></title>

<style>

div {

    width: 100px;

    height: 100px;

    background: red;

    -webkit-transition: width 2s, height 2s, -webkit-transform 2s;

    transition: width 2s, height 2s, transform 2s;

}

div:hover {

    width: 200px;

    height: 200px;

    -webkit-transform: rotate(180deg);

    transform: rotate(180deg);

}

</style>

</head>

<body>

</body>

</html>

.guo{

            width:100px;

            height:100px;

            background:blue;

            transition:width 2s;

/*transition: property duration timing-function delay;*/

/*transition-property      规定设置过渡效果的 CSS 属性的名称。*/

/*transition-duration    规定完成过渡效果需要多少秒。*/

/*transition-delay    定义过渡效果何时开始。*/

/*transition-timing-function    规定速度效果的速度曲线。*/

      }

        .guo:hover{

            width:300px;

        }

    </style>

<body>

    <div class="xuanzhuan"></div>

    <p class="sand"></p>

    <!-- 3d镶嵌 -->

    <div id="div1">

          <div id="div2">HELLO

              <div id="div3">YELLOW</div>

          </div>

    </div>

    <!-- 过渡 -->

css2d 3d的更多相关文章

css-2d,3d，过渡，动画
css2d CSS3 转换可以对元素进行移动.缩放.转动.拉长或拉伸. 2D变换方法: translate()方法,根据左(X轴)和顶部(Y轴)位置给定的参数,从当前元素位置移动 transform: ...
css3的3D和2D
css3的3D旋转:rorateX():参数为正值时,盒子是围绕x轴,完成从Y轴正方向到Y轴负方向的旋转,视觉上呈现高度上的变化.rorateY():参数为正值时,盒子是围绕Y轴,完成从X轴正方向到X ...
2D、3D形变
p.p1 { margin: 0.0px 0.0px 0.0px 0.0px; font: 17.0px Monaco; color: #a5b2b9 } span.Apple-tab-span { ...
CSS3 3D立方体效果－transform也不过如此
CSS3系列已经学习了一段时间了,第一篇文章写了一些css3的奇技淫巧,原文戳这里,还获得了较多网友的支持,在此谢过各位,你们的支持是我写文章最大的动力^_^. 那么这一篇文章呢,主要是通过一个3D立 ...
三分钟学会用 js + css3 打造酷炫3D相册
之前发过该文,后来不知怎么回事不见了,现在重新发一下. 中秋主题的3D旋转相册如图,这是通过Javascript和css3来实现的.整个案例只有不到80行代码,我希望通过这个案例,让正处于迷茫期的j ...
使用CSS3实现一个3D相册
CSS3系列我已经写过两篇文章,感兴趣的同学可以先看一下CSS3初体验之奇技淫巧,CSS3 3D立方体效果-transform也不过如此第一篇主要列出了一些常用或经典的CSS3技巧和方法:第二篇是一 ...
Android ViewPager打造3D画廊
本文已授权微信公众号:鸿洋(hongyangAndroid)在微信公众号平台原创首发. 网上有很多关于使用Gallery来打造3D画廊的博客,但是在关于Gallery的官方说法中表明: This cl ...
如何在ASP.Net创建各种3D图表
我们都知道,图表在ASP.NET技术中是一种特别受欢迎而又很重要的工具.图表是表示数据的图形,一般含有X和Y两个坐标轴.我们可以用折线,柱状,块状来表示数据.通过图表控件,我们即能表示数据又能比较各种 ...
现代3D图形编程学习-基础简介(3)-什么是opengl (译)
本书系列现代3D图形编程学习 OpenGL是什么在我们编写openGL程序之前,我们首先需要知道什么是OpenGL. 将OpenGL作为一个API OpenGL 通常被认为是应用程序接口(API) ...

随机推荐

tomcat Server启动带profile文件
一般mvn如果配置有环境,直接在tomcat server中无法直接启动,需要在vm或者tomcat启动中添加profile启动. pom.xml中添加: 在<profile>中添加默认p ...
Delphi 窗口操作
unit UnitWinUtils; interface uses Windows; Type TDWA128=Array [..] of LongWord; TDWA256=Array [..] o ...
快速理解高性能HTTP服务端的负载均衡技术原理(转)
1.前言在一个典型的高并发.大用户量的Web互联网系统的架构设计中,对HTTP集群的负载均衡设计是作为高性能系统优化环节中必不可少的方案.HTTP负载均衡的本质上是将Web用户流量进行均衡减压,因此 ...
IDEA与eclipse:vm参数调优笔记
我的电脑配置12G内存,64位,win10系统. 首先,idea,是在idea中安装目录下的bin目录下面找到位的同学注意找到idea32.exe.vmoptions的文件去编辑. 更改文件,无非大多 ...
String(Java版本)
import java.io.UnsupportedEncodingException; public class Driver { public static void main(String[] ...
Chrome添加Axure RP插件
之前一直用 Firefox 浏览器浏览原型文件,一直用不惯,而且用 Firefox 的唯一目的就是看原型.其他都是用 Chrome 浏览器,来回切换,各种麻烦,然后下定决心解决 Chrome 浏览器无 ...
c# WinForm 文本输入对话框
这种功能为什么不向MessageBox一样自带,还得自己写~~ 代码: public InputBox(string label) { InitializeComponent(); label1.Te ...
ssh服务简介及应用与服务的进程的类型
SSH ,由 IETF 的网络小组(Network Working Group)所制定:SSH 为建立在应用层基础上的安全协议.SSH 是目前较可靠,专为远程登录会话和其他网络服务提供安全性的协议.利 ...
Taro开发写密码支付弹层
在支付的时候弹出填写密码,模仿了支付宝支付填写密码.主要是利用遮罩的来实现.直接上代码吧. html设计,通过标记控制显示. { showPayPwdInput ? <View classNam ...
C/C++控制台接收不到鼠标消息-【解决办法】
控制台编程中,使用了鼠标操作,遇到了控制台无法接收到鼠标消息的问题,可尝试一下办法解决 [win10系统] 在控制台标题栏右键-默认值-选项,将一下对勾取消然后调用如下函数: HANDLE hIn ...

css2d 3d

css2d 3d的更多相关文章

随机推荐

热门专题