1: css3-景深(3D空间!)
当我们观察物体的时候,由于视角的距离,所看到的物体,近大远小。
perspective: 1200px;(一般都是在父元素中使用)
transform:perspective(1200px) (在子元素中使用)
两个都设置会发生冲突,建议只设置父元素,通常的数值在900-1200之间
如果当你的视线距离物体足够远的时候,基本上就不会有近大远小的感觉
观察3D视觉角度: perspective-origin
perspective-origin:center center (中心)
perspective-origin:left top (左上角)
perspective-origin:100% 100% (右下角)
.box{
width: 400px;height: 400px;background-color: blue;
margin: 100px auto;
transform-style: preserve-3d;
perspective: 300px;
}
h2{
width: 100px;
height: 200px;
background-color: red;
transition: 1s;
}
.box:hover h2{
transform: rotateZ(40deg);
}
</style>
</head>
<body>
<div class="box">
<h2></h2>
</div>
</body>
2:实现3D场景
让父元素形成3D,让其子元素在3D空间进行变化 :transform-style:preserve-3d
2D场景,在屏幕上水平和垂直的交叉线x轴和y轴
3D场景,在垂直于屏幕的方法,相对于3d多出个z轴
Z轴:靠近屏幕的方向是正向,远离屏幕的方向是反向
1): 变形属性:transform:
3D功能函数:
1>: 3D的位移:
transform:translate(x,y,z);
translateX()
translateY()
translateZ(Z轴不能是百分比)
2> : 3D的旋转:
transform:rotate();
rotateX()
rotateY()
rotateZ() //默认情况效果类似
rotate3D(x,y,z,a) [ 0不旋转。1旋转 ]
- x:是一个0到1之间的数值,主要用来描述元素围绕X轴旋转的矢量值;
- y:是一个0到1之间的数值,主要用来描述元素围绕Y轴旋转的矢量值;
- z:是一个0到1之间的数值,主要用来描述元素围绕Z轴旋转的矢量值;
- a:是一个角度值,主要用来指定元素在3D空间旋转的角度,如果其值为正值,元素顺时针旋转,反之元素逆时针旋转。
.box{
width: 400px;height: 400px;background-color: blue;
margin: 100px auto;
transform-style: preserve-3d;
perspective: 300px;
transform: rotateY(50deg);
}
h2{
width: 100px;
height: 200px;
background-color: red;
transition: 1s;
}
.box:hover h2{
transform: rotateX(40deg);
}
</style>
</head>
<body>
<div class="box">
<h2></h2>
</div>
3>: 3D缩放:
3D缩放:
transform:scale3d(x,y,z);
scaleX()
scaleY()
scaleZ()
正方体
.box {
width: 300px;
height: 300px;
position: fixed;
transform-style: preserve-3d;
margin: 0px auto;
left: 0;
right: 0;
top: 0;
bottom: 0;
transform: rotateX(20deg) rotateY(30deg);
transition: 2s;
margin: 100px auto;
}
.box div {
width: 300px;
height: 300px;
position: absolute;
left: 0;
top: 0;
border: 2px solid red;
opacity: 0.5;
backface-visibility: hidden;
font-size: 100px;
color: #ffffff;
text-align: center;
line-height: 300px;
font-weight: bolder;
}
.c1 {
transform: translateZ(150px);
background: pink;
}
.c2 {
transform: translateZ(-150px) rotateY(180deg);
background: powderblue;
}
.c3 {
transform: translateY(-150px) rotateX(90deg);
background: red;
}
.c4 {
transform: translateY(150px) rotateX(-90deg);
background: royalblue;
}
.c5 {
transform: translateX(-150px) rotateY(-90deg);
background: sienna;
}
.c6 {
transform: translateX(150px) rotateY(90deg);
background: sienna;
}
</style>
</head>
<body>
<div class="box">
<img src="images/2.jpg" alt="">
<div class="c1">1</div>
<div class="c2">2</div>
<div class="c3">3</div>
<div class="c4">4</div>
<div class="c5">5</div>
<div class="c6">6</div>
</div>
</body>
css3动画
制定关键帧:
@keyframes mymove{
from{初始状态属性}
to{结束状态属性}
}
或
@keyframes mymove{
0%{初始状态属性}
50%{}(中间再可以添加关键帧)
100%{结束状态属性}
}
animation: 复合属性
animation-name 关键帧的名称
animation-duration 动画的持续的时间
animation-timing-function 动画运用的类型(匀速linear、加速度、减速度、贝塞尔曲线)
animation-delay 动画的延迟
animation-iteration-count 动画运动的次数(默认情况下运动1次) infinite(无限循环)
animation-direction 运动的方向
属性值:
- reverse:反方向运行 ( 让关键帧从后往前执行 )
- alternate:动画先正常运行再反方向运行,并持续交替运行
- alternate-reverse:动画先反运行再正方向运行,并持续交替运行
animation-play-state
属性值:
paused暂停
running运动
常用的写法:
animation:关键帧的名称 动画运动的时间 linear(匀速) 动画延迟的时间
1:transform-origin:center center -600px; /把Z轴的变形原点放在父元素上面/
2: animation-timing-function:
动画的类型:
- linear:线性过渡。等同于贝塞尔曲线(0.0, 0.0, 1.0, 1.0)
- ease:平滑过渡。等同于贝塞尔曲线(0.25, 0.1, 0.25, 1.0)
- ease-in:由慢到快。等同于贝塞尔曲线(0.42, 0, 1.0, 1.0)
- ease-out:由快到慢。等同于贝塞尔曲线(0, 0, 0.58, 1.0)
- ease-in-out:由慢到快再到慢。等同于贝塞尔曲线(0.42, 0, 0.58, 1.0)
- step-start:马上跳到动画每一结束桢的状态
.box {
width: 1000px;
height: 600px;
background-color: skyblue;
position: relative;
margin: 100px auto;
}
h3 {
width: 100px;
height: 100px;
background-color: red;
position: absolute;
animation: h3 2s infinite;
}
.box:hover h3 {
animation-play-state: paused;
}
@keyframes h3 {
0% {
left: 0;
top: 0;
}
25% {
left: 900px;
top: 0;
}
50% {
left: 900px;
top: 500px;
}
75% {
left: 0;
top: 500px;
}
100% {
left: 0;
top: 0;
}
}
</style>
</head>
<body>
<div class="box">
<h3></h3>
</div>
animation vs transition
相同点:都是随着时间改变元素的属性值。
transition
过渡:
特点:需要事件进行触发。
animation
动画:
特点:不需要事件进行触发。调用关键帧即可
注意: 图片在旋转后,使自身背面不可见
backface-visibility: hidden;