8.28学习笔记
08.28
今天主要学习了3d效果
3d
transform：向元素应用2d或3d转换
transform-origin：允许你改变被转换元素的位置
transform-style：规定被嵌套元素如何在3d空间中展示
:preserve-3d 元素的子元素呈3d效果
perspective：规定3d元素的透视效果。透视的虚拟距离。给元素的父级。
backface-visibility：定义元素在不面向屏幕时是否可见。
：hidden（不可见）/visible（可见）
实例:旋转正方体
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
.kuajia{
width: 400px;
height: 400px;
/*border: 1px solid black;*/
margin: 400px auto;
position: relative;
transform-style: preserve-3d;
perspective: 7000px;
animation: zhuan 3s linear infinite;
}
.kuajia>div{
width: 400px;
height: 400px;
position: absolute;
transition: all 6s linear;
}
.a{
background: wheat;
transform:translateZ(-200px);
}
.b{
background: blueviolet;
transform:translateZ(200px);
}
.c{
background: skyblue;
transform: rotateY(90deg) translateZ(-200px);
}
.d{
background: darkgray;
transform: rotateY(90deg) translateZ(200px);
}
.e{
background: yellow;
transform: rotateX(90deg) translateZ(-200px);
}
.f{
background: palevioletred;
transform: rotateX(90deg) translateZ(200px);
}
@-webkit-keyframes zhuan{
from{transform:/* rotateX(0) */rotateY(0);}
to{transform:/* rotateX(360deg) */rotateY(360deg);}
}
.kuajia:hover .a{
transform:translateZ(200px);
}
.kuajia:hover .b{
transform:translateZ(-200px);
}
.kuajia:hover .c{
transform: rotateY(90deg) translateZ(200px);
}
.kuajia:hover .d{
transform: rotateY(90deg) translateZ(-200px);
}
.kuajia:hover .e{
transform: rotateX(90deg) translateZ(200px);
}
.kuajia:hover .f{
transform: rotateX(90deg) translateZ(-200px);
}
</style>
</head>
<body>
<div class="kuajia">
<div class="a"></div>
<div class="b"></div>
<div class="c"></div>
<div class="d"></div>
<div class="e"></div>
<div class="f"></div>
</div>
</body>
</html>
