No.4 - 3D 空間的卡片翻轉動效

時間 2019-12-05

標籤 no.4 3d 空間卡片翻轉简体版

原文原文鏈接

參考css

①張鑫旭http://www.zhangxinxu.com/wordpress/2012/09/css3-3d-transform-perspective-animate-transition/html

②CODEPEN優秀聖誕老人https://codepen.io/Alireza29675/pen/KwgwMycss3

代碼wordpress

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Reverse</title>
</head>
<style>
    .divin{
        /*perspective: 800px;*/
        width: 250px;
        height: 350px;
    }
    .down{
        /*perspective: 800px;*/
        width: 250px;
        height: 350px;
        position: relative;
        top:-350px;
        transform:rotateY(180deg);
    }
    .out{
        backface-visibility: hidden;
        position: absolute;
        left: 800px;
        perspective: 800px;
        width: 250px;
        height: 350px;
        transform-style: preserve-3d;
        transition: transform 0.5s linear;    
    }
</style>
<body>
    <div class="out">
    <div class="divin" onclick="rotate()"><img src="C:\Users\Administrator\Desktop\ife%2F任務四設計稿\任務四設計稿\正面.jpg" alt="up"></div>
    <div class="down"><img src="C:\Users\Administrator\Desktop\ife%2F任務四設計稿\任務四設計稿\反面.jpg" alt="down"></div>
    </div>
</body>
<script>
    function rotate(){
    var b1 = document.querySelector(".out");
    b1.style.transform = "rotateY(180deg)";
}
</script>
</html>

主要點spa

①perspective屬性設計

②transform-style:preserve-3d;3d

③backface-visibility:hiddencode

相關標籤/搜索

每日一句

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