純Css3手作網頁圖片效果

        .rotate-demo {

            width: 220px;

            height: 220px;

            margin: 0 auto;

            background: no-repeat url("images/author.jpg") left top;

            -webkit-background-size: 220px 220px;

            -moz-background-size: 220px 220px;

            background-size: 220px 220px;

            -webkit-border-radius: 110px;

            border-radius: 110px;

            -webkit-transition: -webkit-transform 2s ease-out;

            -moz-transition: -moz-transform 2s ease-out;

            -o-transition: -o-transform 2s ease-out;

            -ms-transition: -ms-transform 2s ease-out;

                -webkit-transform: rotateZ(360deg);

                -o-transform: rotateZ(360deg);

                -ms-transform: rotateZ(360deg);

                transform: rotateZ(360deg);

    </style>

<p class="rotate-demo"></p>

CSS3：

<style type="text/css">

    .img-container {

        background-color: #000;

        width: 220px;

        height: 220px;

        margin: 20px 50px;

    .img {

        -webkit-transform: scale(0.6);

        -moz-transform: scale(0.6);

        -o-transform: scale(0.6);

        -webkit-transition-duration: 0.5s;

        -moz-transition-duration: 0.5s;

        -o-transition-duration: 0.5s;

        .img img {

            padding: 1px;

            border-radius: 10px;

            border: 1px solid #fff;

        .img:hover {

            -webkit-transform: scale(0.8);

            -webkit-box-shadow: 0px 0px 30px #ccc;

            -moz-transform: scale(0.8);

            -moz-box-shadow: 0px 0px 30px #ccc;

            -o-transform: scale(0.8);

            -o-box-shadow: 0px 0px 30px #ccc;

</style>

HTML：

<p class="img-container">

            <p class="img">

                <img src="https://img.php.cn/upload/article/000/000/013/91ad2d958c7d97417c4d740b2c80e27a-0.jpg">

        </p>

        .carousel-container {

            margin: 20px auto;

            width: 210px;

            height: 140px;

            position: relative;

        #carousel {

            width: 100%;

            height: 100%;

            position: absolute;

            transform-style: preserve-3d;

            animation: rotation 20s infinite linear;

            #carousel:hover {

                animation-play-state: paused;

            #carousel figure {

                display: block;

                position: absolute;

                width: 186px;

                height: 116px;

                left: 10px;

                top: 10px;

                background: black;

                overflow: hidden;

                border: solid 1px black;

                #carousel figure:nth-child(1) {

                    transform: rotateY(0deg) translateZ(288px);

                #carousel figure:nth-child(2) {

                    transform: rotateY(40deg) translateZ(288px);

                #carousel figure:nth-child(3) {

                    transform: rotateY(80deg) translateZ(288px);

                #carousel figure:nth-child(4) {

                    transform: rotateY(120deg) translateZ(288px);

                #carousel figure:nth-child(5) {

                    transform: rotateY(160deg) translateZ(288px);

                #carousel figure:nth-child(6) {

                    transform: rotateY(200deg) translateZ(288px);

                #carousel figure:nth-child(7) {

                    transform: rotateY(240deg) translateZ(288px);

                #carousel figure:nth-child(8) {