css3中添加了很多新的标签
| 属性 | 描述 | css |
| transform | 向元素应用 2D 或 3D 转换。 | 3 |
| transform-origin | 允许你改变被转换元素的位置。 | 3 |
| transform-style | 规定被嵌套元素如何在 3D 空间中显示。 | 3 |
| perspective | 规定 3D 元素的透视效果。 | 3 |
| perspective-origin | 规定 3D 元素的底部位置。 | 3 |
| backface-visibility | 定义元素在不面对屏幕时是否可见。 | 3 |
可以通过这些属性来对一个平面图形操作达到一个立体的效果
| 函数 | 描述 |
| matrix3d(n,n,n,n,n,n,n,n,n,n,n,n,n,n,n,n) | 定义 3D 转换，使用 16 个值的 4x4 矩阵 |
| translate3d(x,y,z) | 定义 3D 转化 |
| translateX(x) | 定义 3D 转化，仅使用用于 X 轴的值 |
| translateY(y) | 定义 3D 转化，仅使用用于 Y 轴的值 |
| translateZ(z) | 定义 3D 转化，仅使用用于 Z 轴的值 |
| scale3d(x,y,z) | 定义 3D 缩放转换 |
| scaleX(x) | 定义 3D 缩放转换，通过给定一个 X 轴的值 |
| scaleY(y) | 定义 3D 缩放转换，通过给定一个 Y 轴的值 |
| scaleZ(z) | 定义 3D 缩放转换，通过给定一个 Z 轴的值 |
| rotate3d(x,y,z,angle) | 定义 3D 旋转 |
| rotateX(angle) | 定义沿 X 轴的 3D 旋转 |
| rotateY(angle) | 定义沿 Y 轴的 3D 旋转 |
| rotateZ(angle) | 定义沿 Z 轴的 3D 旋转 |
| perspective(n) | 定义 3D 转换元素的透视视图 |
红色的标签就是这次案例里面所用到的
<!DOCTYPE html>
<html lang="en"> <head>
<meta charset="UTF-8">
<title>Document</title>
<style>
* {
margin: 0;
padding: 0;
} .container {
width: 200px;
height: 200px;
margin: 200px auto;
border: 1px solid black;
perspective: 800px;
transform-origin: center center;
} #divE {
width: 200px;
height: 200px;
position: relative;
transform-style: preserve-3d;
transform-origin: center center -50px;
} #divE figure {
width: 200px;
height: 200px;
left: 0;
top: 0;
/*display: block;*/
position: absolute;
transform-origin: center center;
} .front {
transform: rotateY( 0deg) translateZ( 100px);
background: red;
opacity: 0.5;
} .back {
transform: rotateY( 180deg) translateZ( 100px);
background: blue;
opacity: 0.5;
} .right {
transform: rotateY( 90deg) translateZ( 100px);
background: gold;
opacity: 0.5;
} .left {
transform: rotateY( -90deg) translateZ( 100px);
background: green;
opacity: 0.5;
} .top {
transform: rotateX( 90deg) translateZ( 100px);
background: lightblue;
opacity: 0.5;
} .bottom {
transform: rotateX( -90deg) translateZ( 100px);
background: indigo;
opacity: 0.5;
} .myfirst {
/*定义动画插件名变*/
animation-name: myfirst;
/*定义动画完成一个周期需要的时间*/
animation-duration: 2s;
/*定义动画开始的时间*/
animation-delay: 1s;
/*定义动画的速度曲线,这是定义为匀速*/
animation-timing-function: linear;
/*定义动画播放的次数,这里定义为重复*/
animation-iteration-count: infinite;
/*定义下一周期是否逆向,这里定义为逆向*/
animation-direction: alternate;
/*定义动画是否暂停播放,这里定义为播放*/
animation-play-state: running;
} @keyframes myfirst {
0% {
transform: rotate3d(0, 1, 0, 0deg);
/*transform: rotate3d(1, 0, 0, 0deg);*/
transform-origin: center center;
}
100% {
transform: rotate3d(0, 1, 0, 360deg);
/*transform: rotate3d(1, 0, 0, 180deg);*/
transform-origin: center center;
}
}
</style>
</head> <body>
<div class="container">
<div id="divE">
<figure class="front">1</figure>
<figure class="back">2</figure>
<figure class="right">3</figure>
<figure class="left">4</figure>
<figure class="top">5</figure>
<figure class="bottom">6</figure>
</div>
</div>
</body>
<script>
var a = document.getElementById("divE");
// alert(a);
a.onclick = function() {
a.className = "myfirst";
}
a.onmouseleave = function() {
a.className = a.className.replace("myfirst", " ");
}
</script> </html>
第一,先要有六个div前后,左右,上下;在六个div外面需要一个父级容器,在父级的外部需要一个