<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
body{
background-color: #000;
}
.ball-box{
width: 300px;
height: 300px;
position: absolute;
left: 50%;
top: 50%;
margin: -150px 0 0 -150px;
perspective: 3000px; /* 其子元素获得透视效果*/
perspective-origin: 50% 50%;
}
@-webkit-keyframes rotate3d {
0%{transform: rotateZ(-30deg) rotateY(0deg);}
100%{transform: rotateZ(-30deg) rotateY(360deg);}
}
.ball {
height: 100%;
transform-style: preserve-3d; /*所有的子元素呈现3d视图*/
-webkit-animation: rotate3d 30s infinite linear;
/*transform: rotateZ(-30deg) rotateY(0deg);*/
}
.ball:after{
立体线框球型旋转的实现
最新推荐文章于 2019-09-28 18:42:21 发布