CSS3 3D制作實戰案例分析

2024-07-11 08:38:14

字體：大中小

來源：轉載

供稿：網友

一、前言

上一節，介紹了基礎的CSS3 3D動畫原理實現，也舉了一個小小的例子來演示，但是有朋友跟我私信說想看看一些關于CSS3 3D的實例，所以在這里為了滿足一下大家的需求，同時也為了以后能夠更好的鞏固CSS3 3D的知識，所以在這里寫下這篇博文，希望能夠幫助你更好的理解3D的制作和實現原理，同時也歡迎各位小伙伴對文中的錯誤給予指正

二、入門案例分析

這里先說一說我的規劃，我打算先從入門級的案例入手，然后依次遞推，最后要達到的效果是，理解完所有的例子的設計思路，基本上CSS3-3D制作就能夠隨心所欲。

1、矩形圖片翻滾效果

這個效果比較簡單，所以在這里就不多做解釋了，先來復習一下上一節說的要創建一個3D環境，我們需要創建一個“燈光”，“舞臺”，“演員”(相當于perspective、preserve-3d、image)，不清楚的小伙伴請看這里,具體的代碼如下：

XML/HTML Code復制內容到剪貼板

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style type="text/css">
        div div img{
            width:300px;
            height:300px;
            position:absolute;
            /* -webkit-transition: all 0.8s; */
        }
        div div{
            -webkit-transition: all 1s;
        }
        #img1{
            -webkit-transform: translateZ(150px);
            /* -webkit-transition: all 0.8s; */
        }
        #img2{
            -webkit-transform: rotateX(-90deg) translateZ(150px);