CSS3でかっこいい立体フォトアルバムを作成する例-CSSチュートリアル-php.cn

ホームページ

ウェブフロントエンド

CSSチュートリアル

CSS3でかっこいい立体フォトアルバムを作成する例

高洛峰

Mar 08, 2017 pm 01:41 PM

この素晴らしい 3 次元フォトアルバムを共有して、皆さんにも気に入っていただければ幸いです!

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>三维动画</title>
<style type="text/css">
* {   
    padding : 0px;   
    margin: 0px;   
}   
body {   
    background: url(images/758.jpg) no-repeat top center;   
}   
.product {   
    height: 400px;   
    position: fixed;   
    top: 20%;   
    right: 20%;   
    /*视距*/   
    perspective : 500px;   
}   
.scene {   
    height: 250px;   
    width: 250px;   
    transform-style: preserve-3d;   
    transform-origin: 50%;   
    margin: 100px;   
    /*定义一个名为slide的动画*/   
    animation: slide 12s linear infinite;   
}   

.scene ul li {   
    width: 230px;   
    height: 230px;   
    list-style: none;   
    border: 5px solid rgba(255, 255, 255, 0.5);   
    position: absolute;   
}   

@keyframes slide{   
    from{   
        transform: rotateY(0deg);   
    }   

    to{   
        transform: rotateY(360deg);   
    }   
}   
.s1 {   
    float: left;   
}   
.s1 ul li:nth-child(1) {   
    transform: rotateY(0deg) translateZ(118px);   
}   
.s1 ul li:nth-child(2) {   
    transform: rotateY(90deg)  translateZ(118px);   
}   
.s1 ul li:nth-child(3) {   
    transform: rotateY(180deg)  translateZ(118px);   
}   
.s1 ul li:nth-child(4) {   
    transform: rotateY(-90deg)  translateZ(118px);   
}   
.s2 {   
    float: right;   
}   
.s2 ul li:nth-child(1) {   
    transform: rotateY(0deg) translateZ(200px);   
}   
.s2 ul li:nth-child(2) {   
    transform: rotateY(90deg)  translateZ(200px);   
}   
.s2 ul li:nth-child(3) {   
    transform: rotateY(180deg)  translateZ(200px);   
}   
.s2 ul li:nth-child(4) {   
    transform: rotateY(-90deg)  translateZ(200px);   
}   
</style>
</head>
<body>
    <p class=&#39;product&#39;>
    <!-- scene类是为了修饰两个p的相同点 -->
    <!-- s1和s2是为了显示两个p的不同，一个左浮动，一个右浮动 -->
        <p class=&#39;scene s1&#39;>
            <ul>
                <li><img  src="/static/imghwm/default1.png"  data-src="images/1.jpg"  class="lazy"  / alt="CSS3でかっこいい立体フォトアルバムを作成する例" ></li>
                <li><img  src="/static/imghwm/default1.png"  data-src="images/2.jpg"  class="lazy"  / alt="CSS3でかっこいい立体フォトアルバムを作成する例" ></li>
                <li><img  src="/static/imghwm/default1.png"  data-src="images/3.jpg"  class="lazy"  / alt="CSS3でかっこいい立体フォトアルバムを作成する例" ></li>
                <li><img  src="/static/imghwm/default1.png"  data-src="images/4.jpg"  class="lazy"  / alt="CSS3でかっこいい立体フォトアルバムを作成する例" ></li>
            </ul>
        </p>
        <p class=&#39;scene s2&#39;>
            <ul>
                <li><img  src="/static/imghwm/default1.png"  data-src="images/1.jpg"  class="lazy"  / alt="CSS3でかっこいい立体フォトアルバムを作成する例" ></li>
                <li><img  src="/static/imghwm/default1.png"  data-src="images/2.jpg"  class="lazy"  / alt="CSS3でかっこいい立体フォトアルバムを作成する例" ></li>
                <li><img  src="/static/imghwm/default1.png"  data-src="images/3.jpg"  class="lazy"  / alt="CSS3でかっこいい立体フォトアルバムを作成する例" ></li>
                <li><img  src="/static/imghwm/default1.png"  data-src="images/4.jpg"  class="lazy"  / alt="CSS3でかっこいい立体フォトアルバムを作成する例" ></li>
            </ul>
        </p>
    </p>
</body>
</html>

スクリーンショットは次のとおりです:

CSS3でかっこいい立体フォトアルバムを作成する例

以上がCSS3でかっこいい立体フォトアルバムを作成する例の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

声明

この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。

Draggin＆＃039;ドロップピン＆＃039;反応でApr 17, 2025 am 11:52 AM

React Ecosystemは、すべてがドラッグアンドドロップの相互作用に焦点を合わせている多くのライブラリを提供します。 React-Dnd、React-Beautiful-Dnd、

高速ソフトウェアApr 17, 2025 am 11:49 AM

最近、高速ソフトウェアについて素晴らしい相互接続されたことがいくつかありました。

バックグラウンドクリップ付きのネストされたグラデーションApr 17, 2025 am 11:47 AM

バックグラウンドクリップをすべて頻繁に使用すると言うことができます。私は、日々のCSS作業ではほとんど使用されていない＆＃039; dを賭けています。しかし、私はステファン・ジュディスの投稿でそれを思い出しました、

ReackAnimationFrameを使用してReact Hooksを使用しますApr 17, 2025 am 11:46 AM

RequestAnimationFrameでアニメーション化するのは簡単なはずですが、Reactのドキュメントを徹底的に読んでいない場合は、おそらくいくつかのことに遭遇するでしょう

ページの上部にスクロールする必要がありますか？Apr 17, 2025 am 11:45 AM

おそらく、それをユーザーに提供する最も簡単な方法は、要素上のIDをターゲットにするリンクです。だから...

Best（GraphQL）APIはあなたが書くものですApr 17, 2025 am 11:36 AM

聞いてください、私はGraphQLの専門家ではありませんが、私はそれで働くことを楽しんでいます。フロントエンド開発者としてデータを公開する方法はかなりクールです。メニューのようなものです

毎週のプラットフォームニュース：テキスト間隔のブックマークレット、トップレベルの待望、新しいアンプロードインジケーターApr 17, 2025 am 11:26 AM

今週のラウンドアップ、タイポグラフィを検査するための便利なブックマークレットである。

ボーダー半径を保存しながら箱を拡張するためのさまざまな方法Apr 17, 2025 am 11:19 AM

私は最近、Codepenの興味深い変化に気づきました。ホームページにペンをホバリングすると、丸い角が背面に拡大する長方形があります。

See all articles

ホットAIツール

ホットツール

Damn Vulnerable Web App (DVWA) は、非常に脆弱な PHP/MySQL Web アプリケーションです。その主な目的は、セキュリティ専門家が法的環境でスキルとツールをテストするのに役立ち、Web 開発者が Web アプリケーションを保護するプロセスをより深く理解できるようにし、教師/生徒が教室環境で Web アプリケーションを教え/学習できるようにすることです。安全。 DVWA の目標は、シンプルでわかりやすいインターフェイスを通じて、さまざまな難易度で最も一般的な Web 脆弱性のいくつかを実践することです。このソフトウェアは、