css动画之黑科技
2017-11-01 本文已影响0人
秀逼
正负旋转相消3D动画
直接上代码：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>正负旋转相消</title>
</head>
<style type="text/css">
body,
html {
overflow: hidden;
}
div {
transform-style: preserve-3d;
perspective: 500px;
}
.reverseRotate {
margin: 20vh auto;
}
.rotate,
.reverseRotate {
width: 50vh;
height: 50vh;
}
.content {
width: 100%;
height: 100%;
line-height: 50vh;
text-align: center;
background-color: rgba(255, 100, 100, .8);
font-size: 5vh;
color: #fff;
box-shadow: 0px 0px 8px 2px rgba(100, 100, 100, .6);
}
.rotate {
animation: rotate 5s linear infinite;
}
.reverseRotate {
animation: reverseRotate 5s linear infinite;
}
@keyframes rotate {
0% {
transform: rotateX(0deg) rotateZ(0deg);
}
50% {
transform: rotateX(40deg) rotateZ(180deg);
}
100% {
transform: rotateX(0deg) rotateZ(360deg);
}
}
@keyframes reverseRotate {
0% {
transform: rotateZ(0deg);
}
100% {
transform: rotateZ(-360deg);
}
}
</style>
<body>
<div class="reverseRotate">
<div class="rotate">
<div class="content">正负旋转相消3D动画</div>
</div>
</div>
</body>
</html>
这里要注意两点：其一，是开启3D转换的代码。其二：是外层两个祖先元素正负旋转相消的理解，注意理解rotateX,rotateY,rotateZ分别是以x,y,z三个轴为中心进行旋转。
