web基础学习（十一）CSS3之3D六面体动画案例
上一节：CSS3之 @keyframes——————下一节：CSS3之动画过渡实用案例
3D动画中两个知识点：
perspective、transform-style
perspective
perspective属性定义 3D 元素距视图的距离，以像素计。该属性允许您改变 3D 元素查看 3D 元素的视图。
当为元素定义 perspective 属性时，其子元素会获得透视效果，而不是元素本身。
- 注释：perspective 属性只影响 3D 转换元素。
transform-style
transform-style属性规定如何在 3D 空间中显示被嵌套的元素。
flat：默认,子元素不显示3D位置, 看不到子元素preserve-3d:子元素显示3D位置
示例展示：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style type="text/css">
html, body {
margin: 0;
height: 100%;
}
body {
background: linear-gradient(orange, wheat);
}
.wrap {
padding-top: 200px;
/*设置透视距离,不要太近*/
perspective: 1000px;
}
.cube {
width: 200px;
height: 200px;
margin: 0 auto;
position: relative;
/*3D效果下显示下面所有的元素*/
-webkit-transform-style: preserve-3d;
-moz-transform-style: preserve-3d;
-ms-transform-style: preserve-3d;
transform-style: preserve-3d;
transform: rotateX(-30deg) rotateY(-70deg) rotateZ(0deg);
animation: cubeRotate 10s linear infinite alternate;
}
/*定义包裹元素旋转浏览器兼容模式 Safari 和 Chrome*/
@-webkit-keyframes cubeRotate {
from {
-webkit-transform: rotateX(0deg) rotateY(0deg);
}
to {
-webkit-transform: rotateX(360deg) rotateY(360deg);
}
}
/*定义包裹元素旋转*/
@keyframes cubeRotate {
from {
transform: rotateX(0deg) rotateY(0deg);
}
to {
transform: rotateX(360deg) rotateY(360deg);
}
}
/*定义外层元素综合属性*/
.cube > div {
width: 198px;
height: 198px;
background-color: rgba(0, 0, 0, 0.3);
border: 1px solid #ccc;
font-size: 40px;
color: #fff;
text-align: center;
line-height: 198px;
position: absolute;
left: 0;
top: 0;
transition: all 0.3s ease;
}
/* 外层 元素位置定义,前后左右上下。*/
.out-front {
-webkit-transform: translateZ(100px);
-ms-transform: translateZ(100px);
-o-transform: translateZ(100px);
transform: translateZ(100px);
}
.out-back {
-webkit-transform: translateZ(-100px) rotateY(180deg);
-ms-transform: translateZ(-100px) rotateY(180deg);
-o-transform: translateZ(-100px) rotateY(180deg);
transform: translateZ(-100px) rotateY(180deg);
}
.out-left {
-webkit-transform: translateX(-100px) rotateY(-90deg);
-ms-transform: translateX(-100px) rotateY(-90deg);
-o-transform: translateX(-100px) rotateY(-90deg);
transform: translateX(-100px) rotateY(-90deg);
}
.out-right {
-webkit-transform: translateX(100px) rotateY(90deg);
-ms-transform: translateX(100px) rotateY(90deg);
-o-transform: translateX(100px) rotateY(90deg);
transform: translateX(100px) rotateY(90deg);
}
.out-top {
-webkit-transform: translateY(-100px) rotateX(90deg);
-ms-transform: translateY(-100px) rotateX(90deg);
-o-transform: translateY(-100px) rotateX(90deg);
transform: translateY(-100px) rotateX(90deg);
}
.out-bottom {
-webkit-transform: translateY(100px) rotateX(-90deg);
-ms-transform: translateY(100px) rotateX(-90deg);
-o-transform: translateY(100px) rotateX(-90deg);
transform: translateY(100px) rotateX(-90deg);
}
/*鼠标经过元素移动位置,前后左右上下*/
.cube:hover .out-front {
transform: translateZ(200px);
}
.cube:hover .out-back {
transform: translateZ(-200px) rotateY(180deg);
}
.cube:hover .out-left {
transform: translateX(-200px) rotateY(-90deg);
}
.cube:hover .out-right {
transform: translateX(200px) rotateY(90deg);
}
.cube:hover .out-top {
transform: translateY(-200px) rotateX(90deg);
}
.cube:hover .out-bottom {
transform: translateY(200px) rotateX(-90deg);
}
/*定义内层元素综合属性*/
.cube span {
display: block;
width: 98px;
height: 98px;
opacity: 0.5;
background-color: pink;
border: 1px solid orange;
position: absolute;
left: 50px;
top: 50px;
}
/* 内层元素定义位置,前后左右上下 */
.in-front {
-webkit-transform: translateZ(50px);
-ms-transform: translateZ(50px);
-o-transform: translateZ(50px);
transform: translateZ(50px);
}
.in-back {
-webkit-transform: translateZ(-50px) rotateY(180deg);
-ms-transform: translateZ(-50px) rotateY(180deg);
-o-transform: translateZ(-50px) rotateY(180deg);
transform: translateZ(-50px) rotateY(180deg);
}
.in-left {
-webkit-transform: translateX(-50px) rotateY(-90deg);
-ms-transform: translateX(-50px) rotateY(-90deg);
-o-transform: translateX(-50px) rotateY(-90deg);
transform: translateX(-50px) rotateY(-90deg);
}
.in-right {
-webkit-transform: translateX(50px) rotateY(90deg);
-ms-transform: translateX(50px) rotateY(90deg);
-o-transform: translateX(50px) rotateY(90deg);
transform: translateX(50px) rotateY(90deg);
}
.in-top {
-webkit-transform: translateY(-50px) rotateX(90deg);
-ms-transform: translateY(-50px) rotateX(90deg);
-o-transform: translateY(-50px) rotateX(90deg);
transform: translateY(-50px) rotateX(90deg);
}
.in-bottom {
-webkit-transform: translateY(50px) rotateX(-90deg);
-ms-transform: translateY(50px) rotateX(-90deg);
-o-transform: translateY(50px) rotateX(-90deg);
transform: translateY(50px) rotateX(-90deg);
}
/*同样可以同时定义内层的鼠标经过属性这里大家自行发挥吧*/
</style>
</head>
<body>
<div class="wrap">
<div class="cube">
<div class="out-front">前</div>
<div class="out-back">后</div>
<div class="out-left">左</div>
<div class="out-right">右</div>
<div class="out-top">顶</div>
<div class="out-bottom">底</div>
<span class="in-front"></span>
<span class="in-back"></span>
<span class="in-left"></span>
<span class="in-right"></span>
<span class="in-top"></span>
<span class="in-bottom"></span>
</div>
</div>
</body>
</html>