CSS3制作3D旋转视频展示区

<!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: -mz-radial-gradient(farthest-side ellipse at center,  rgba(246,241,232,.85) 39%,rgba(212,204,186,.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,.85) 39%,rgba(212,204,186,.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,.85) 39%,rgba(212,204,186,.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 .6s;
    -moz-transition: -moz-transform .6s;
    -ms-transition: -ms-transform .6s;
    -o-transition: -o-transform .6s;
    transition: transform .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 .6s;
   -moz-transition: all .6s;
   -ms-transition: all .6s;
   -o-transition: all .6s;
   transition: all .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 .6s;
    -moz-transition: all .6s;
    -ms-transition: all .6s;
    -o-transition: all .6s;
    transition: all .6s;
 }

 .information strong {
   display: block;
   margin: .2em 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>闻名中外，曾担任美国赌场保安总顾问的魔术手石一坚，终回流澳门退休，更宴请各方朋友到来庆祝生日宴.
                </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>

时间： 2024-07-31 06:32:26

CSS3制作3D旋转视频展示区的相关文章

制作3D旋转视频展示区

CSS3 3D变形制作视频展示区 <!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,2

任务一.制作多背景提示:上层有一个径向渐变,渐变图像farthest-side ellipse at center, rgba(246,241,232,.85) 39%,rgba(212,204,186,.5) 100%),底层使用背景图片. 任务二.控制背景图像尺寸提示:使用background-size,让两层背景都是全屏显示任务三.给每个列表项添加过渡动画效果提示:使用transition属性,给每个列表项.item设置变形过渡效果.transition: -webkit-tra

制作一个3D旋转视频展示区

案例演示地址:http://codepen.io/airen/pen/eAztg 原案例来自慕课网的一个作业. 大致就是利用CSS3的新特性 3D transform的变换做一个特效. 1. background-image: radial-gradient( farthest-side ellipse at center, rgba(246, 241, 232, .85) 39%, rgba(212, 204, 186, .5) 100%), url("http://fs0.139js.com

css3作3D旋转视频展示

代码如下: <!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); ba

css3制作3d旋转相册

此处只是记录,解析可见原文:http://www.cnblogs.com/skyblue-li/p/6092799.html <!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/> &l

CSS3 3D变形制作视频展示区

<div id="container"> <h1>CSS3 3D变形制作视频展示区</h1> <div class="wrapper"> <div class="item"> <img src="http://pic2.qiyipic.com/image/20140415/4e/32/5f/v_105669963_m_601_180_101.jpg" />

css3+jquery制作3d旋转相册<转>

css3+jquery制作3d旋转相册首先来看一下今天的炫酷效果: 首先分析一下这张图片: 1.每张图片都有倒影 2.这11张图片呈圆形均匀排列 3.可旋转,上下移动(当然这是效果做出来以后,图片是分析不出来的) 那下面就开始吧. 一.准备新建三个文件夹分别命名为css,js,img分别存放demo.css,jquery.js.demo.js,11张示例图片.新建demo.html将demo.css,jquery.js,demo.js引入. 二.图片倒影制作 1 <div id="wr

10.14 CSS3制作3D图片立方体旋转特效

<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title>CSS3制作3D图片立方体旋转特效 - 站长素材</title> <style type="text/css"> html{ background:linear-gradient(#ff0 0%,#F00 80%); height: 100%; } .wrap{

CSS3制作3D旋转视频展示区