找回密码
 立即注册

QQ登录

只需一步,快速开始

微信公众号开发资源

关注:848

所属分类: 微信开发 微信公众号开发资源

本版块为微信公众号开发教程与公众号开发相关技术分享板块,技术提问请到其他对应的问答板块发帖:)

[html5开发博客] css3D转换及过渡

[复制链接]
查看: 4997|回复: 8
最佳答案
0 

102

主题

112

帖子

4090

积分

S1

积分
4090
 楼主| 发表于 2015-11-26 21:45:22 | 显示全部楼层 |阅读模式
.3D转换
        属性:
         perspective:设置假定人眼到投影平面的距离
                   注意:perspective只影响3D元素,不影响2D元素
                   设置位置:加在父元素上,设置好后,其子元素就可以完成3D的转换
          1.3D位移:改变在z轴上的位置
              属性:transform
                       函数:transformZ(z);
                       transform3d(x,y,z);
          2.3D缩放:
                主要包含:
                  -scaleZ(z)
                  -scale3d(x,y,z);
          3.3D旋转,会有浏览器兼容问题,如果谷歌打开,则在perspective前面加-webkit
          属性:transform
                    函数:
                       rotateX(deg);
                               rotateY(deg);
                               rotateZ(deg);
                               rotate3d(x,y,z,deg);
               x,y,z:分别取值为10-1(1表示顺时针转,-1表示逆时针转,0不转)
               rotate3d(1,1,1,deg);xyz分别顺时针转45
  1. <!DOCTYPE html >
  2. <head>
  3.   <title> 3D旋转 </title>
  4.   <meta charset="utf-8" />
  5.    <style>
  6.       #father{
  7. -webkit-perspective:100px;
  8. width:200px;
  9. height:200px;
  10. border:1px solid black;
  11. position:relative;
  12. }
  13. #div1{
  14. position:absolute;
  15. width:100px;
  16. height:100px;
  17. border:1px solid black;
  18. background:#ddd;
  19. left:50px;
  20. top:50px;
  21. /*x轴旋转*/
  22. transform:rotateX(45deg);
  23. }
  24.    </style>
  25. </head>

  26. <body>
  27.    <div id="father">
  28.          <div id="div1">Rotate div</div>
  29.    </div>
  30. </body>
  31. </html>
复制代码

图片1.png
.过渡
    1.什么是过渡:元素从一个【状态】到另外一个【状态】的【平滑变换】【过程】
    2.过渡属性:transition
    3.过渡4要素:(子属性)
        1.过渡属性:元素的哪个【状态】发生变化时要使用过渡的效果,当指定的属性发生改变时,就会触发过渡效果
                 语法:
               transition-propertynone |all|property
                2.过渡的时间:整个过渡效果在多长时间内完成,以 秒(s)或毫秒(ms)为单位
                 语法:
                   transition-durations|ms
                   transition-duration1s
                  注意:过渡时间默认为零,如果为零时则没有过渡效果的产生。如果想看到过渡效果,则必须设置该属性。
                3.过渡函数:指定时间内(transition-duration)过渡的速度效果。
                语法:
                  transition-timing-function
                         取值:
                            ease:默认值,慢速开始,速度变快,慢速结束
                                  linear:匀速开始到结束,这个最常用
                                  ease-in:慢速开始,快速结束,加速效果(由慢到块)
                                  ease-out:快速开始,慢速结束,减速效果(由快到慢)
                                  ease-in-out:以慢速开始和结束,鲜加速再减速
               4.过渡延迟:当过渡操作被激发后,等待多长时间后才开始执行效果
                 语法:
                transition-delay,以秒或毫秒作为单位
         5.统一设置过渡效果
                  transition: 用于设置四个过渡子属性
                  transitionproperty duration timing-function delay;(简写)
    4.触发过渡:过渡效果由用户的行为进行出发(点击、鼠标悬停)
  
  1. <!DOCTYPE html>
  2. <head>
  3.   <title> 过渡 </title>
  4.   <meta charset="utf-8" />
  5.   <style>
  6.          #d1{
  7. width:200px;
  8.         height:200px;
  9.         background:red;
  10. /********过渡********/
  11. transition-property:background;
  12. transition-duration:2s;
  13. transition-timing-function:linear;
  14.                 transition-delay:0s;
  15.              }
  16.         #d1:hover{
  17.   background:blue;
  18. }

  19.   </style>
  20. </head>

  21. <body>
  22.    <div id="d1"></div>
  23. </body>
  24. </html>
复制代码

过渡前: 图片2.png 过渡中: 图片3.png 过渡后: 图片4.png

       5.多个过渡效果
            transition-propertyprop1 prop2...
                      transition-duration: s1 s2...;
            transition-timing-function:linear linear...;
                      transition-delay:s1 s2...;
  1. <!DOCTYPE html>
  2. <head>
  3.   <title> 过渡 </title>
  4.   <meta charset="utf-8" />
  5.   <style>
  6.          #d1{
  7.        width:200px;
  8.    height:200px;
  9.    background:red;
  10.    /********多个属性同时过渡********/
  11.    transition-property:background width;
  12.    transition-duration:2s;
  13.    transition-timing-function:linear;
  14.                     transition-delay:0s;
  15. }
  16. #d1:hover{
  17.        background:blue;
  18.    width:300px;
  19. }

  20.   </style>
  21. </head>

  22. <body>
  23.    <div id="d1"></div>
  24. </body>
  25. </html>
复制代码

过渡前: 图片5.png       过渡中:    图片6.png 过渡后: 图片7.png


回复

使用道具 举报

最佳答案
2 

1

主题

15

帖子

105

积分

新人求带

积分
105
发表于 2015-11-27 10:47:04 | 显示全部楼层
阿斯蒂芬兽表示赞
回复 支持 反对

使用道具 举报

最佳答案
0 

0

主题

4682

帖子

50

积分

新人求带

积分
50
发表于 2018-5-2 04:47:28 | 显示全部楼层
好东西就一定要看看,
回复 支持 反对

使用道具 举报

最佳答案
0 

0

主题

4682

帖子

50

积分

新人求带

积分
50
发表于 2018-5-7 21:23:18 | 显示全部楼层
感谢分享啊啊~~~~~
回复 支持 反对

使用道具 举报

最佳答案
0 

0

主题

4682

帖子

50

积分

新人求带

积分
50
发表于 2018-5-7 23:44:32 | 显示全部楼层
看看,谢谢分享
回复 支持 反对

使用道具 举报

最佳答案
0 

0

主题

4682

帖子

50

积分

新人求带

积分
50
发表于 2018-5-7 23:59:38 | 显示全部楼层
感谢楼主发这么好的源码
回复 支持 反对

使用道具 举报

最佳答案
0 

0

主题

4682

帖子

50

积分

新人求带

积分
50
发表于 2018-5-8 00:02:02 | 显示全部楼层
真贵,便宜点把
回复 支持 反对

使用道具 举报

最佳答案
0 

0

主题

4682

帖子

50

积分

新人求带

积分
50
发表于 2018-5-8 00:11:18 | 显示全部楼层
支持楼主,感谢分享.回复查看!
回复 支持 反对

使用道具 举报

最佳答案
0 

0

主题

1

帖子

30

积分

等待验证会员

积分
30
发表于 2019-5-10 17:51:56 | 显示全部楼层
32225669_201905071917070428727097.png

32225669_201905071920300118759316.png



32225669_201905071922130760393043.png


32225669_201905071925210137467329.png



32225669_201905071926150076940700.png



32225669_201905071930400360790809.png


32225669_201905071932340612376689.png



32225669_201905071934140035820791.png



32225669_201905071935490036723788.png


32225669_201905071937020506359068.jpg


32225669_201905071925210137467329.png
回复 支持 反对

使用道具 举报

您需要登录后才可以回帖 登录 | 立即注册

本版积分规则



www.henkuai.com—微信开发者的分享交流平台,专注微信开发生态。

天津市滨海新区
中新生态城中成大道生态建设公寓9号楼3层301

微信公众号

广告推广
QQ:805874290

市场合作
zhongcong@henkuai.com