找回密码
当前位置：前端开发者 > CSS > 正文

前端开发CSS3之3D旋转视频展示区

2018-12-12 分类：CSS 阅读(782) 评论(0)
前端工程化与模块化开发
web 前端模块化发的开发
前端开发模块化 打包

制作3D旋转视频展示区

html 代码

<!DOCTYPE html>
<html lang=”en”>
    <head>
        <meta charset=”UTF-8″ />
        <title>Document</title>
        <style>
            body {
                margin-top: 5em;
                text-align: center;
                color: #414142;
                background: rgb(246, 241, 232);
                background-image: -ms-radial-gradient(
                        farthest-side ellipse at center,
                        rgba(246, 241, 232, 0.85) 39%,
                        rgba(212, 204, 186, 0.5) 100%
                    ),
                    url(‘http://fs0.139js.com/file/s_jpg_857b081bjw1du3kveu19sj.jpg’);
                background-image: -webkit-radial-gradient(
                        farthest-side ellipse at center,
                        rgba(246, 241, 232, 0.85) 39%,
                        rgba(212, 204, 186, 0.5) 100%
                    ),
                    url(‘http://fs0.139js.com/file/s_jpg_857b081bjw1du3kveu19sj.jpg’);
                background-image: radial-gradient(
                        farthest-side ellipse at center,
                        rgba(246, 241, 232, 0.85) 39%,
                        rgba(212, 204, 186, 0.5) 100%
                    ),
                    url(‘http://fs0.139js.com/file/s_jpg_857b081bjw1du3kveu19sj.jpg’);
                background-size: cover;
            }
            h1,
            em,
            #information {
                display: block;
                font-size: 25px;
                font-weight: normal;
                margin: 2em auto;
            }
            a {
                color: #414142;
                font-style: normal;
                text-decoration: none;
                font-size: 20px;
            }
            a:hover {
                text-decoration: underline;
            }
            #container {
                margin: 0 auto;
                width: 1024px;
            }
            .wrapper {
                display: inline-block;
                width: 310px;
                height: 100px;
                vertical-align: top;
                margin: 1em 1.5em 2em 0;
                cursor: pointer;
                position: relative;
                font-family: Tahoma, Arial;
                -webkit-perspective: 4000px;
                -moz-perspective: 4000px;
                -ms-perspective: 4000px;
                -o-perspective: 4000px;
                perspective: 4000px;
            }
            .item {
                height: 100px;
                -webkit-transform-style: preserve-3d;
                -moz-transform-style: preserve-3d;
                -ms-transform-style: preserve-3d;
                -o-transform-style: preserve-3d;
                transform-style: preserve-3d;
                -webkit-transition: -webkit-transform 0.6s;
                -moz-transition: -moz-transform 0.6s;
                -ms-transition: -ms-transform 0.6s;
                -o-transition: -o-transform 0.6s;
                transition: transform 0.6s;
            }
            .item:hover {
                -webkit-transform: translateZ(-50px) rotateX(95deg);
                -moz-transform: translateZ(-50px) rotateX(95deg);
                -ms-transform: translateZ(-50px) rotateX(95deg);
                -o-transform: translateZ(-50px) rotateX(95deg);
                transform: translateZ(-50px) rotateX(95deg);
            }
            .item img {
                display: block;
                position: absolute;
                top: 0;
                border-radius: 3px;
                box-shadow: 0px 3px 8px rgba(0, 0, 0, 0.3);
                -webkit-transform: translateZ(50px);
                -moz-transform: translateZ(50px);
                -ms-transform: translateZ(50px);
                -o-transform: translateZ(50px);
                transform: translateZ(50px);
                -webkit-transition: all 0.6s;
                -moz-transition: all 0.6s;
                -ms-transition: all 0.6s;
                -o-transition: all 0.6s;
                transition: all 0.6s;
                width: 310px;
                height: 100px;
            }
            .item .information {
                display: block;
                position: absolute;
                top: 0;
                height: 80px;
                width: 290px;
                text-align: left;
                border-radius: 15px;
                padding: 10px;
                font-size: 12px;
                text-shadow: 1px 1px 1px rgba(255, 255, 255, 0.5);
                box-shadow: none;
                background: rgb(236, 241, 244);
                background: -webkit-linear-gradient(
                    to bottom,
                    rgba(236, 241, 244, 1) 0%,
                    rgba(190, 202, 217, 1) 100%
                );
                background: -ms-linear-gradient(
                    to bottom,
                    rgba(236, 241, 244, 1) 0%,
                    rgba(190, 202, 217, 1) 100%
                );
                background: linear-gradient(
                    to bottom,
                    rgba(236, 241, 244, 1) 0%,
                    rgba(190, 202, 217, 1) 100%
                );
                -webkit-transform: rotateX(-90deg) translateZ(50px);
                -moz-transform: rotateX(-90deg) translateZ(50px);
                -ms-transform: rotateX(-90deg) translateZ(50px);
                -o-transform: rotateX(-90deg) translateZ(50px);
                transform: rotateX(-90deg) translateZ(50px);
                -webkit-transition: all 0.6s;
                -moz-transition: all 0.6s;
                -ms-transition: all 0.6s;
                -o-transition: all 0.6s;
                transition: all 0.6s;
            }
            .information strong {
                display: block;
                margin: 0.2em 0 0.5em 0;
                font-size: 20px;
                font-family: ‘Oleo Script’;
            }
            .item:hover img {
                box-shadow: none;
                border-radius: 15px;
            }
            .item:hover .information {
                box-shadow: 0px 3px 8px rgba(0, 0, 0, 0.3);
                border-radius: 3px;
            }
        </style>
    </head>
    <body>
        <div id=”container”>
            <h1>CSS3 3D变形制作视频展示区</h1>
            <div class=”wrapper”>
                <div class=”item”>
                    <img
                        src=”http://img.mukewang.com/545b1e900001db6d04630253.png”
                    />
                    <span class=”information”>
                        <strong>澳门风云</strong
                        >闻名中外，曾担任美国赌场保安总顾问的魔术手石一坚，终回流澳门退休，更宴请各方朋友到来庆祝生日宴.
                    </span>
                </div>
            </div>
            <div class=”wrapper”>
                <div class=”item”>
                    <img
                        src=”http://img.mukewang.com/545b1eb20001ed6a03360201.png”
                    />
                    <span class=”information”>
                        <strong>改过迁善</strong
                        >该剧讲述了金明民饰演的律师在失忆后回顾自己以往的所作所为心生忏悔，为弥补自己犯下的错误而与自己曾经工作过的律师事务所对簿公堂的故事。
                    </span>
                </div>
            </div>
            <div class=”wrapper”>
                <div class=”item”>
                    <img
                        src=”http://img.mukewang.com/545b1eef0001c62903830217.png”
                    />
                    <span class=”information”>
                        <strong>父子刑警</strong>本剧改编自雫井修介小说《Bitter
                        Blood》。剧中，新晋刑警•佐原夏辉（佐藤健饰）被分配到银座警察
                    </span>
                </div>
            </div>
            <div class=”wrapper”>
                <div class=”item”>
                    <img
                        src=”http://img.mukewang.com/545b1f4e0001f90c02850210.png”
                    />
                    <span class=”information”>
                        <strong>果宝特攻3</strong
                        >果宝特攻3,顾名思义是果宝特攻的第二部续集,已在国家广播电影电视总局备案.暂定剧情为:菠萝吹雪偶然间穿越到了古代的水果世界
                    </span>
                </div>
            </div>
            <div class=”wrapper”>
                <div class=”item”>
                    <img
                        src=”http://img.mukewang.com/545b1f5500017d5603190214.png”
                    />
                    <span class=”information”>
                        <strong>红眼</strong
                        >1988年7月16日，从汉城始发的列车发生了一起严重的交通事故，造成100多人死亡。
                    </span>
                </div>
            </div>
            <div class=”wrapper”>
                <div class=”item”>
                    <img
                        src=”http://img.mukewang.com/545b1f620001874503500209.png”
                    />
                    <span class=”information”>
                        <strong>熊出没之夺宝熊兵</strong
                        >一场漆黑雨夜的意外事故，一段笑料十足的误打误撞，将两个外表相似却内容各异的箱子调换。
                    </span>
                </div>
            </div>
        </div>
    </body>
</html>
前端模块化开发优点
模块化前端开发
前端模块化开发的理解
赞(0)
前端开发者 » 前端开发CSS3之3D旋转视频展示区
64K
标签：前端开发者

前端开发者

相关推荐

评论 抢沙发

评论前必须登录！

 

最新评论