菜单

css三 3D

2019年5月3日 - CSS/CSS3

css3D 的魅力

2018/05/23 · CSS ·
3D

原来的文章出处: 子慕大诗人   

● css3 3D旋转
○ rotateX() 方法,成分围绕其 X 轴以给定的度数举办旋转
○ rotateY() 方法,成分围绕其 Y 轴以给定的度数实行旋转
○ rotateZ(angle),定义沿 Z 轴的 3D 旋转。
● 3D景深
○ perspective(n),景深,离荧屏多少路程的离开去旁观显示屏。(值越粗大越小)
○ perspective-origin景深的侧着重。该属性允许改变 3D
成分的平底地点。(正是观察角度)
● css3 3D平移
○ translateZ(z),z轴平移
● css 3D立体空间
○ transform-origin:(x,y,z)设置旋转元素的基点位置,该属性必须与 transform
属性一起使用。

transform-style:flat(子成分不保留其叁d地点)/preserve-三d(子成分保留其三d地方)规定被嵌套成分怎么着在
3D 空间中彰显。
○ backface-visibility定义成分在不面对荧屏时是或不是可知。(驾驭)
● css3 3D缩放
○ scaleZ(z)定义 3D 缩放转变,通过给定1个 Z 轴的值
注释:Internet Explorer 10 和 Firefox 支持 3D 转换。
Chrome 和 Safari 需求前缀 -webkit-。
Opera 依然不帮忙 3D 转变(它只协助 二D 转变)。
● css3 动画
○ @keyframes 规则 用于创建动画。在 @keyframes 中规定某项 CSS
样式,能成立由目前体制渐渐改为新样式的动画效果。
○ animation-name规定 @keyframes 动画的称号。
○ animation-duration规定动画落成3个周期所消费的秒或飞秒。暗中同意是 0
○ animation-timing-function规定动画的进程曲线。暗中认可是 “ease”
● ease规定慢速初始,然后变快,然后慢速结束的衔接效果
● linear规定以平等速度开头至停止的过渡效果
● ease-in规定以慢速开端的联网效果
● ease-out规定以慢速甘休的连接效果
● ease-in-out规定以慢速早先和终结的衔接效果
● step-start跳到每帧开始
● step-end跳到每帧停止
○ animation-delay规定动画几时起头。暗中同意是 0,允许负值;
○ animation-iteration-count规定动画被广播的次数。暗中认可是 一,
■ infiniteInfiniti循环
○ animation-direction规定动画是还是不是在下16日期逆向地播放。暗中同意是 “normal”
■ alternate反向播放
○ animation:name duration timing-function delay iteration-count
direction;
○ animation-play-state规定动画是不是正在运行或中断。暗许是 “running”。
■ paused暂停
○ animation-fill-mode规定对象动画时间之外的意况。
■ none不退换暗许行为
■ forwards当动画完毕后,保持最终四个属性值(在结尾多少个根本帧中定义)。
讲明:在 @keyframes
中创建动画时,把它包扎到某些选取器,不然不会产生动画效果。通过分明至少以下两项
CSS三 动画属性,就可以将动画片绑 定到选择器:
1.规定动画的名目
2.规定动画的时间长度
Internet Explorer 10、Firefox 以及 Opera 支持 @keyframes 规则和
animation 属性。
Chrome 和 Safari 须要前缀 -webkit-。
Internet Explorer 九,以及更早的本子,不协助 @keyframe 规则或 animation
属性。

前言:

前不久玩了玩用css来塑造3D效果,写了几个demo,所以博客总结一下。 
在读书那篇博客在此之前,请先活动精晓一下css
3D的性质,比如:transform-style,transform-origin,transform, perspective。

demo1

惊人可变的立方体,先来看望最后效果,自身弄得有些丑,就算设计师调下色,增多点成分应该会狼狈的多

图片 1图片 2

1.  大家先用css落成贰个长方体,多少个长方体有多少个边,大家写四个div,并用三个div包裹起来

<div class=”cube-box”> <div class=”cube1 cube”></div>
<div class=”cube2 cube”></div> <div class=”cube3
cube”></div> <div class=”cube4 cube”></div> <div
class=”cube5 cube”></div> <div class=”cube6
cube”></div> </div>

1
2
3
4
5
6
7
8
<div class="cube-box">
    <div class="cube1 cube"></div>
    <div class="cube2 cube"></div>
    <div class="cube3 cube"></div>
    <div class="cube4 cube"></div>
    <div class="cube5 cube"></div>
    <div class="cube6 cube"></div>
</div>

贰.  给.cube-box设置宽高以及preserve-三d属性保留子成分叁d转变,子成分.cube全体万万定位

.cube-box{ transform-style: preserve-3d; width: 30px; height: 100px;
position: relative; } .cube{ position: absolute; left: 0; top: 0; }

1
2
3
4
5
6
7
8
9
10
11
.cube-box{
    transform-style: preserve-3d;
    width: 30px;
    height: 100px;
    position: relative;
}
.cube{
    position: absolute;
    left: 0;
    top: 0;
}

3. 
先写三个面.cube一,宽高百分百同等父成分的宽高,背景象为red,代码和功能如下

.cube1{ width: 100%; height: 100%; background: red; }

1
2
3
4
5
.cube1{
    width: 100%;
    height: 100%;
    background: red;
}

图片 3图片 4

四. 
为了未来方便大家看出立体效果,以后大家旋转一下父成分,到场如下代码,效果如下

.cube-box{ transform: rotateX(-30deg) rotateY(45deg); }

1
2
3
.cube-box{
    transform: rotateX(-30deg) rotateY(45deg);
}

图片 5图片 6

伍. 
.cube1作为第2个元素,咱们无需它旋转,它看成暗许面,未来拼接第3个面.cube2,根据.cube一的写法,可是我们设置为铁锈色,效果如下,.cube2重叠在.cube一上,因而大家还要求旋转.cube贰

.cube2{ width: 100%; height: 100%; background: green; }

1
2
3
4
5
.cube2{
    width: 100%;
    height: 100%;
    background: green;
}

图片 7图片 8

陆. 
大家未来试着旋转一下.cube二,造成了如下效果。关于rotate的团团转方向这里不表达,不懂的朋友能够自动查看别的文书档案。

.cube2{ width: 100%; height: 100%; background: green; transform:
rotateY(-90deg); }

1
2
3
4
5
6
.cube2{
    width: 100%;
    height: 100%;
    background: green;
    transform: rotateY(-90deg);
}

图片 9图片 10

7.  在用translate3d移动一下吗。  效果如下图,屌屌屌。 
然而难点来了,这里的代码不够利索,translate的值要求手动总计,今后宽是30px,要求活动它的百分之五1015px进行拼接,那些值需求大家手动总结写上去,或许到时候用js计算,太low,作者盼望只需求用js依据后端数据动态设置父成分.cube-box的宽高,子成分全体自适应就行,那样才更加好用。

.cube2{ width: 100%; height: 100%; background: green; transform:
rotateY(-90deg) translate3d(15px,0,15px); }

1
2
3
4
5
6
.cube2{
    width: 100%;
    height: 100%;
    background: green;
    transform: rotateY(-90deg) translate3d(15px,0,15px);
}

图片 11图片 12

8. 
由此今后大家要采纳另八天质量transform-origin,transform-origin私下认可是“center
center 0;”或然说“百分之五10 二分一0;”,所以在第五个步骤的时候,我们旋转.cube2的时候是依附它本人中间的岗位实行的团团转,我们改动一下,把调换的任务定在要素左侧,也一样到达了效果,代码反而更简便易行了

.cube2{ width: 100%; height: 100%; background: green; transform-origin:
left top; transform: rotateY(-90deg); }

1
2
3
4
5
6
7
.cube2{
    width: 100%;
    height: 100%;
    background: green;
    transform-origin: left top;
    transform: rotateY(-90deg);
}

图片 13图片 14

9.  根据.cube二的措施大家给.cube三依照同等的写法旋转,并安装普鲁士蓝,效果如下

.cube3{ width: 100%; height: 100%; background: blue; transform-origin:
right top; transform: rotateY(90deg); }

1
2
3
4
5
6
7
.cube3{
    width: 100%;
    height: 100%;
    background: blue;
    transform-origin: right top;
    transform: rotateY(90deg);
}

图片 15图片 16

10. 
.cube四就有点不雷同了,下四个面不须要旋转,只供给把.cube1向Z轴方向移动30px宽的任务,X和Y轴能够用width和height作为基数设置比例,比方width是20px,如若要X轴移动20px,能够设置translateX(百分百),不过Z就只好用实际值了。 
所以这里本人向来不减轻low的难题,作者不得不手动的写上translateZ的值,可能用js来动态赋值。 
效果如下,要是有越来越好的方案,能够争论博客告知本人。

.cube4{ width: 100%; height: 100%; background: gray; transform-origin:
right top; transform: translateZ(30px); }

1
2
3
4
5
6
7
.cube4{
    width: 100%;
    height: 100%;
    background: gray;
    transform-origin: right top;
    transform: translateZ(30px);
}

图片 17图片 18

11. 
.cube5也正是顶面,我们的顶面和低面都以长方形的,.cube5如果写宽高百分之百正是星型了,为了不手动依然动态写中度,这里运用了另壹种写法设置width:百分之百;不安装height,设置padding-top:百分之百;那样平等使.cube5产生了长方形,定义粉金棕,延X轴转动90度,代码和意义如下

.cube5{ width: 100%; padding-top: 100%; background: pink;
transform-origin: left top; transform: rotateX(90deg); }

1
2
3
4
5
6
7
.cube5{
    width: 100%;
    padding-top: 100%;
    background: pink;
    transform-origin: left top;
    transform: rotateX(90deg);
}

图片 19图片 20

1二. 
 最后.cube六和.cube5写法同样,只是大家需求把岗位绝对定位到底层,那时候把.cube类设置为发光度一半,方便大家查阅,代码和功能如下

.cube6{ width: 100%; padding-top: 100%; background: black; top: inherit;
bottom: 0; transform-origin: left bottom; transform: rotateX(-90deg); }

1
2
3
4
5
6
7
8
9
.cube6{
    width: 100%;
    padding-top: 100%;
    background: black;
    top: inherit;
    bottom: 0;
    transform-origin: left bottom;
    transform: rotateX(-90deg);
}

图片 21图片 22

13. 
我们把每3个面都定义为栗色,调节一下每个面的颜料值,那样看起来就有观念的职能

图片 23图片 24

1肆. 
 未来长方体已经写好,我们来点动作效果吧,加多三个div.cube-wapper把刚刚的cube-box再封装1层,让cube-box相对定位到父成分尾巴部分,那样高度变化的时候是提高延伸和减弱,js机械漏刻每隔5秒更换一下box的莫斯中国科学技术大学学,效果如下

let boxs = document.getElementsByClassName(‘cube-box’);
setInterval(()=>{ for(let item in boxs){ if(boxs[item].style)
boxs[item].style.height = `${Math.random()*300}px`; } },5000)

1
2
3
4
5
6
let boxs = document.getElementsByClassName(‘cube-box’);
setInterval(()=>{
    for(let item in boxs){
        if(boxs[item].style) boxs[item].style.height = `${Math.random()*300}px`;
    }
},5000)

图片 25图片 26

一5.  畸形啊,怎么尾巴部分还是有运动? 
原因是我们tranform的rotate写在了.cube-box上,当中度改造的时候,会惨遭旋转的熏陶导致地方偏移,因而把.cube-box的tranform写到.cube-wrapper上去便未有那些难点了。效果如下

图片 27图片 28

demo2

1个圆柱体,因为被退换为gif效果有点差,实际运作会好过多。 
这么些的贯彻比较奇葩,在其实地方中差不离向来不什么卵用,上边小编仍旧大约说下达成形式吧。

图片 29图片 30

壹.  要么和demo1差不离,先定义包裹层,定义preserve-3d,代码差不离如下

<div class=”wrapper”> <div class=”box” id=”circles”>
</div> </div> <style> .wrapper{ transform-style:
preserve-3d; width: 100px; height: 100px; } .box{ width: 100%; height:
100%; position: relative; transform-style: preserve-3d; transform:
rotateX(-73.5deg) rotateY(5deg); } </style>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
<div class="wrapper">
    <div class="box" id="circles">
    </div>
</div>
 
<style>
.wrapper{
    transform-style: preserve-3d;
    width: 100px;
    height: 100px;
}
.box{
    width: 100%;
    height: 100%;
    position: relative;
    transform-style: preserve-3d;
    transform: rotateX(-73.5deg) rotateY(5deg);
}
</style>

二. 
在box里布置n个div,每三个<div样式同样设置为border-radius:一半和一px的border边框,唯1区别的是它们的translateZ地点紧邻相差一,其实正是把1px的边框依次排列起来变成八个圆柱,那样会必要扭转许多div,最终大家如故用js去生成大家要求的div数量。

let circles = document.getElementById(‘circles’); for(let
i=0;i<100;i++){ let div = document.createElement(‘div’); div.style =
`transform: translateZ(${i}px)`; div.className = `circle
${i==0||i==99?’bg’:”}`; circles.appendChild(div); }

1
2
3
4
5
6
7
let circles = document.getElementById(‘circles’);
for(let i=0;i<100;i++){
    let div = document.createElement(‘div’);
    div.style = `transform: translateZ(${i}px)`;
    div.className = `circle ${i==0||i==99?’bg’:”}`;
    circles.appendChild(div);
}

n个1px的div是无缝拼接起来的,为啥照旧会有缝隙呢? 
大家想象一张纸画了1个圈,从纸的最薄的一方面看,是或不是看不到圈了,假若再转变一点角度,或者也不得不看看一丝丝,就是以此道理。如此方法本身还试了下,写贰个球,这里不传gif了,截图看看效果,github上会有代码能够亲自下载下来看看,效果依然挺美妙的

图片 31图片 32 
 图片 33
图片 34
图片 35
   
  图片 36

demo3

串挂的卡牌效果,效果大概如下,像是挂在线上的陆张照片,还带几许风吹的效果。 
实际也格外轻便,依然选取方面demo一的原理旋转卡片,再经过一定把卡牌排列,定义四个极其循环的摇摆动画,给种种卡牌使用分化的时日,最终绑定点击事件,给成分选用css过渡动画transition。 
过渡动画保险成分改造还是复苏的时候,都能有功效,所以过渡动画很符合用来做交互。 
注意: 实行了三d转变后,要小心成分的可点击区域,用chrome调节和测试工具查看比较标准。

图片 37图片 38

结语:

css
3d大多数时候利用情形不多,同时也正如消耗设备质量,要是有机遇使用,能在网页中给用户体验带来那么一小点惊奇,也是没有错的。

好了,小编通晓我们必要怎样,旅社地址早就希图好 https://github.com/zimv/css3d

都见到此间了,要不点个赞~

1 赞 1 收藏
评论

图片 39

相关文章

发表评论

电子邮件地址不会被公开。 必填项已用*标注

网站地图xml地图