CSS-3D動畫筆記

時間 2019-12-07

標籤 css 3d 動畫筆記欄目 CSS 简体版

原文原文鏈接

3Dcss

在2d的基礎上添加 z 軸的變化
3D 位移：在2d的基礎上添加 translateZ（），或者使用translate3d（）
　　translateZ（）：以方框中心爲原點，變大
html

3D 縮放：在2d的基礎上添加 scaleZ（），或者使用scale3d（）
　　scaleZ（）和 scale3d（）函數單獨使用時沒有任何效果
函數

3D 透視：perspective 規定3D元素的透視效果
　　能夠取值爲none或不設置，這種狀況下說明沒有透視效果
　　取值越小，3d效果越明顯
動畫

3D背面可見：backface-visibility 定義元素在不面對屏幕時是否可見
　　transform-style：規定被嵌套元素在3D空間中顯示
　　transform-style：flat；子元素將不保留其 3d 位置
　　transform-style：preserve-3d；子元素將保留其3d位置ui

動畫
　　動畫是使元素從一種樣式逐漸變化爲另外一種樣式的效果。
　　css中經過 @keyframes 規則是建立動畫，能夠改變任意多的樣式任意多的次數。
　　當在 @keyframes 建立動畫，把它綁定到一個選擇器，不然動畫不會有任何效果。
　　指定至少這兩個CSS3的動畫屬性綁定向一個選擇器：
　　規定動畫的名稱
　　規定動畫的時長
　　語法：@keyframes styleName {
　　　　keyframes-selector{css-style;}
　　　　}
　　keyframes-selector：能夠用百分比來規定變化發生的時間
　　也能夠用關鍵詞 "from" 和 "to"
　　0% 是動畫的開始，100% 是動畫的完成spa

3D示例3d

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style type="text/css">
    * {margin: 0; padding: 0;}
    .box {width: 600px; height: 600px; margin: 0 auto;  position: relative; perspective: 800px;}
        .box ul {list-style: none; width: 300px; height: 300px; transition: all 2s;
                    position: absolute; top: 0; left: 0; right: 0; bottom: 0; margin: auto; transform-style: preserve-3d;}
            .box ul li {width: 300px; height: 300px;  text-align: center; line-height: 100px;
                        position: absolute; font-size: 36px;} 
            .box ul li:nth-child(1) {background: rgba(255, 0, 255, 0.5); transform: translateY(-150px) rotateX(90deg);}
            .box ul li:nth-child(2) {background: rgba(192, 157, 81, 0.5); transform: translateY(150px) rotateX(-90deg);}
            .box ul li:nth-child(3) {background: rgba(35, 130, 142, 0.5); transform: translateX(-150px) rotateY(-90deg);}
            .box ul li:nth-child(4) {background: rgba(142, 35, 35, 0.5); transform: translateX(-150px) rotateY(90deg);}
            .box ul li:nth-child(5) {background: rgba(121, 17, 240, 0.5); transform: translateZ(150px);}
            .box ul li:nth-child(6) {background: rgba(47, 142, 35, 0.5); transform: translateZ(-150px) rotateY(180deg);}
        
        .box ul:hover {transform:rotateX(360deg) rotateY(360deg);}
    </style>
</head>
<body>
    <div class="box">
        <ul>
            <li>上</li>
            <li>下</li>
            <li>左</li>
            <li>右</li>
            <li>前</li>
            <li>後</li>
        </ul>
    </div>
</body>
</html>

結果code

動畫示例orm

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8"> 
    <title>Demo</title>
    <style> 
    .box {
        width:100px;
        height:100px;
        background:red;
        position:relative;
        animation:animationStyle 5s linear 2s infinite alternate;
    }

    @keyframes animationStyle
    {
        0%   {background:red; left:0px; top:0px;}
        25%  {background:yellow; left:200px; top:0px;}
        50%  {background:blue; left:200px; top:200px;}
        75%  {background:green; left:0px; top:200px;}
        100% {background:red; left:0px; top:0px;}
    }

    </style>
</head>
<body>

    <div class="box"></div>

</body>
</html>

結果htm

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。