使用CSS3繪製一個簡易的3D相冊

時間 2019-12-05 標籤使用 css3 css 繪製一個簡易 3d 相冊

使用CSS3繪製一個簡易的3D相冊，先來看一下完成的靜態效果圖，：
css

關於CSS3中的transform3D的屬性已經在學習CSS3 3D轉換，製做一個3D立方這篇文章中講解了，接下來咱們直接來講如何實現一個3D相冊。git

整體佈局

<div class="container">
    <div class="box" id="box">
        <div class="img img1"></div>
        <div class="img img2"></div>
        <div class="img img3"></div>
        <div class="img img4"></div>
        <div class="img img5"></div>
        <div class="img img6"></div>
    </div>
</div>

樣式說明

container是整體的容器，設置3D視圖距離prespective。github

.container{ width:800px; height: 400px; margin:0 auto; perspective: 1000px; }

接下來是防止圖片的容器box,須要將transform-style屬性設置爲preserve-3d，設置子元素變換方式爲3d變換，不然3d效果會不起做用，動畫效果咱們在最後設置，做用是讓相冊動起來。web

.box{ position: relative; width: 100%; height: 100%; -webkit-transform-style: preserve-3d; -moz-transform-style: preserve-3d; -ms-transform-style: preserve-3d; transform-style: preserve-3d; -webkit-animation:animate 12s linear infinite; -o-animation:animate 12s linear infinite; animation:animate 12s linear infinite; }

接下來設置全部圖片的樣式，由於這裏設置的是全部的圖片，因此不須要設置3d屬性，3d屬性須要在分別設置。app

.img{ position: absolute; width:300px; height: 200px; background: #8959a8; top: 100px; left:250px; box-shadow: inset 0 0 5px #bbbbbb; }

如今全部的圖片應該是疊加在一塊兒的，咱們看一下這個時候的效果：

看出來了，毛效果都沒有，接下來設置單個圖片的樣式，這裏設置的樣式基本上都同樣，只是背景圖片和在Y軸的旋轉角度不同，我放了6張圖片，因此每一個旋轉60度，若是放置的圖片張數不同那旋轉的角度就不同。svg

.img1{ background: url("../img/1.jpg") no-repeat; -webkit-background-size:cover; background-size:cover; transform: rotateY(0deg); }
/*****/
.img6{ background: url("../img/6.jpg") no-repeat; -webkit-background-size:cover; background-size:cover; transform: rotateY(300deg); }

這個時候應該是有效果了，咱們來看一下：
佈局

這個時候效果已經出來了，只是照片都擠在一塊兒了，這個時候咱們能夠將每一個照片都向本身的z軸方向往前移一點，那照片就不會擠在一塊兒了，咱們能夠修改代碼，添加 translateZ(300px)：學習

.img1{ background: url("../img/1.jpg") no-repeat; -webkit-background-size:cover; background-size:cover; transform: rotateY(0deg) translateZ(300px); }
/*****/
.img6{ background: url("../img/6.jpg") no-repeat; -webkit-background-size:cover; background-size:cover; transform: rotateY(300deg) translateZ(300px); }

這樣之後效果就能夠了，咱們來看一下：
動畫

ok，這個時候效果已經完成了，只要再加上動畫就能夠了：

@keyframes animate {
    0%{ transform: rotateY(0deg); }
    100%{ transform: rotateY(360deg); }
}

將動畫添加到相冊的容器上，

.box{ animation:animate 12s linear infinite; }

好啦，這樣一個基本的3D相冊就完成了。

下面是所有的代碼：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>3D相冊</title>
    <style> .container{ width:800px; height: 400px; margin:0 auto; perspective: 1000px; } .box{ position: relative; width: 100%; height: 100%; -webkit-transform-style: preserve-3d; -moz-transform-style: preserve-3d; -ms-transform-style: preserve-3d; transform-style: preserve-3d; -webkit-animation:animate 12s linear infinite; -o-animation:animate 12s linear infinite; animation:animate 12s linear infinite; } .img{ position: absolute; width:300px; height: 200px; background: #8959a8; top: 100px; left:250px; box-shadow: inset 0 0 5px #bbbbbb; } .img1{ background: url("../img/1.jpg") no-repeat; -webkit-background-size:cover; background-size:cover; transform: rotateY(0deg) translateZ(300px); } .img2{ background: url("../img/2.jpg") no-repeat; -webkit-background-size:cover; background-size:cover; transform: rotateY(60deg) translateZ(300px); } .img3{ background: url("../img/3.jpg") no-repeat; -webkit-background-size:cover; background-size:cover; transform: rotateY(120deg) translateZ(300px); } .img4{ background: url("../img/4.jpg") no-repeat; -webkit-background-size:cover; background-size:cover; transform: rotateY(180deg) translateZ(300px); } .img5{ background: url("../img/5.jpg") no-repeat; -webkit-background-size:cover; background-size:cover; transform: rotateY(240deg) translateZ(300px); } .img6{ background: url("../img/6.jpg") no-repeat; -webkit-background-size:cover; background-size:cover; transform: rotateY(300deg) translateZ(300px); } @keyframes animate { 0%{ transform: rotateY(0deg); } 100%{ transform: rotateY(360deg); } } </style>
</head>
<body>
<div class="container">
    <div class="box" id="box">
        <div class="img img1"></div>
        <div class="img img2"></div>
        <div class="img img3"></div>
        <div class="img img4"></div>
        <div class="img img5"></div>
        <div class="img img6"></div>
    </div>
</div>
</body>
</html>