CSS3D--球体


<html>
<head>
    <meta charset="UTF-8">
    <title>Documenttitle>
    <style>
        html, body {height:100%;}
        body {padding:0;margin:0;background:#333;position:relative;}
        .ball {height:500px;width:500px;position:absolute;top:50%;left:50%;margin:-250px 0 0 -250px;transition:all .6s;}
        .ball:hover {transform:scale(1.2);}

        .ball_box {width:100%;height:100%;animation:rotate3d 20s infinite linear;}
        .ball div {width:100%;height:100%;border-radius:100%;border:solid 1px #fff;position:absolute;top:50%;left:50%;margin:-50% 0 0 -50%;transform-style:preserve-3d;}
        .ball .x1 {transform:rotateY(0deg)}
        .ball .x2 {transform:rotateY(20deg)}
        .ball .x3 {transform:rotateY(40deg)}
        .ball .x4 {transform:rotateY(60deg)}
        .ball .x5 {transform:rotateY(80deg)}
        .ball .x6 {transform:rotateY(100deg)}
        .ball .x7 {transform:rotateY(120deg)}
        .ball .x8 {transform:rotateY(140deg)}
        .ball .x9 {transform:rotateY(160deg)}

        .ball .y1 {transform:rotateX(90deg) translateZ(200px) scale(0.60);}
        .ball .y2 {transform:rotateX(90deg) translateZ(150px) scale(0.80);}
        .ball .y3 {transform:rotateX(90deg) translateZ(100px) scale(0.92);}
        .ball .y4 {transform:rotateX(90deg) translateZ(50px) scale(0.98);}
        .ball .y5 {transform:rotateX(90deg) translateZ(0);}
        .ball .y6 {transform:rotateX(90deg) translateZ(-50px) scale(0.98);}
        .ball .y7 {transform:rotateX(90deg) translateZ(-100px) scale(0.92);}
        .ball .y8 {transform:rotateX(90deg) translateZ(-150px) scale(0.80);}
        .ball .y9 {transform:rotateX(90deg) translateZ(-200px) scale(0.60);}

        @keyframes rotate3d {
            0% {transform:rotate(-20deg) rotateX(-20deg) rotateY(0deg)}
            100% {transform:rotate(-20deg) rotateX(-20deg) rotateY(360deg)}
        }
    style>
head>

<body>
<div class="ball">
    <div class="ball_box">
        <div class="x1">div>
        <div class="x2">div>
        <div class="x3">div>
        <div class="x4">div>
        <div class="x5">div>
        <div class="x6">div>
        <div class="x7">div>
        <div class="x8">div>
        <div class="x9">div>
        <div class="y1">div>
        <div class="y2">div>
        <div class="y3">div>
        <div class="y4">div>
        <div class="y5">div>
        <div class="y6">div>
        <div class="y7">div>
        <div class="y8">div>
        <div class="y9">div>

    div>
div>
body>
html>

你可能感兴趣的:(HTML5+CSS3,css3)