CSS3制作的图片3D旋转特效

小提示

Ctrl+/代码提示(需IE11)
F11键放大 ESC键缩小
PgUp上页 PgDn下页

推荐代码

运行代码缩小

引入JS
- 3.0.0 2.2.0 2.1.4 2.1.3 2.1.2 2.1.1 2.1.0 2.0.3 2.0.2 2.0.1 2.0.0 1.12.0 1.11.3 1.11.2 1.11.1 1.11.0 1.10.2 1.10.1 1.10.0 1.9.1 1.9.0 1.8.3 1.8.2 1.8.1 1.8.0 1.7.2 1.7.1 1.7 1.6.4 1.6.2 1.6.1 1.4.4 1.4.3 1.4.2 1.4.1 1.4.0
- 1.7.3 1.7.2 1.7.1.0 1.7.0.0
- 2.0.0-beta.0 2.0.0-alpha.55 1.5.0-rc.0 1.4.8 1.4.0 1.3.20 1.2.29 1.1.5 1.0.8
- 1.8.3 1.7.0 1.6.0 1.5.2 1.4.4 1.3.3 1.2.4 1.1.7
- 1.10.4 1.9.7 1.8.10 1.7.8 1.6.3 1.5.4 1.4.6 1.3.3
- core1.6.0 core-compat1.6.0 core1.5.2 core-compat1.5.2 core-full-compat-yc1.4.5 core-full-compat1.4.5 core-full-nocompat-yc1.4.5 core-full-nocompat1.4.5
- 1.4.2 1.4.1 1.4.0 1.3.0 1.2.0 1.1.0
- 3.7.3 3.7.2 3.7.1 3.7.0 3.7 3.6.2 3.6.1 3.6

引入框架
- 1.4.5 1.4.4 1.4.3 1.4.2 1.4.1 1.4.0 1.3.2
- 1.11.4 1.11.3 1.11.2 1.11.1 1.11.0 1.10.4 1.10.3 1.10.2
- 3.3.6 3.3.5 3.3.0 3.2.0 2.3.2

汉王

HTML代码

复制格式化注释注释清空

放大

<!DOCTYPE HTML>
<html lang="en-US">
<head>
<meta charset="UTF-8">
<title>CSS3-3D旋转</title>
</head>
<body>
<style type="text/css">
*{margin:0;padding:0px;}
body{background:#b1b1b1;font-family:Arial;font-size:125%;color:#202020;}
li{position:relative;list-style:none;float:left;width:235px;height:220px;margin:10px 0 0 10px;cursor:pointer;}
#container {position: relative; height:362px; width: 282px; margin: 0 auto;top:50px;
    -webkit-perspective: 800px;/*3d场景*/
    -moz-perspective: 800px;
}
#container div {position:absolute; left:0; top:0; width:242px; height: 322px; padding:20px; background:#463;
    -ms-border-radius: 5px;
    -moz-border-radius: 5px;
    -webkit-border-radius: 5px;
    border-radius: 5px;
    -webkit-transition: 1.5s ease-in-out;
    -moz-transition: 1.5s ease-in-out;
    -ms-transition: 1.5s ease-in-out;
    -o-transition: 1.5s ease-in-out;
    transition: 1.5s ease-in-out;
}
#container div.lower {font-family: verdana, arial, sans-serif; background:#642;
    background: -moz-linear-gradient(-45deg, #642, #864 50%, #642 100%);  
    background: -webkit-gradient(linear, 0 0, 100% 100%, from(#642), color-stop(50%, #a86), color-stop(100%, #642));
    -moz-transform-style: preserve-3d;
    -moz-backface-visibility: hidden;/*抖动*/
    -webkit-transform-style: preserve-3d;
    -webkit-backface-visibility: hidden;
    -moz-transform: rotateY(-180deg);
    -webkit-transform: rotateY(-180deg);
}
#container div.lower h1 {font-size:20px; padding:0; margin:0; color:#fff; line-height:40px;}
#container div.lower p {font-size:11px; padding:0; margin:0; color:#eee; line-height:20px;}
#container div.lower a {color:#ff0;}
#container div.upper {
    -moz-transform-style: preserve-3d;
    -moz-backface-visibility: hidden;
    -webkit-transform-style: preserve-3d;
    -webkit-backface-visibility: hidden;
    background: -moz-linear-gradient(-45deg, #463, #8a7 50%, #463 100%);  
    background: -webkit-gradient(linear, 0 0, 100% 100%, from(#463), color-stop(50%, #8a7), color-stop(100%, #463)); 
}
#container div.upper img {border:1px solid #fff;width:242px;}
#container:hover div.lower {    -moz-transform: rotateY(0);
    -webkit-transform: rotateY(0);
}
#container:hover div.upper {
    -webkit-transform: rotateY(180deg);
    -moz-transform: rotateY(180deg);
}
</style>
<div id="container">
    <div class="lower">
        <h1>The Barn Owl</h1>
        <p>汽车可以不买日货，但影像产品不买日本的还可以买哪里的？所以不是抵制日货，而是奋发自强，技术领先才行。所以各位要在自己的岗位上负责任的干好本职工作、推动祖国强大才是惩罚日本的核心所在。</p>
        <p>Source <a href="/">Wikipedia</a></p>
    </div>
    <div class="upper">
        <img src="//ku.shouce.ren/files/images/201601/56a32612d748e.jpg" alt="Barn owl">
    </div>
</div>
</body>
</html>

CSS代码

复制格式化注释注释颜色清空

放大

JS代码

复制格式化注释注释清空

放大

运行代码

简介

请输入代码名称！

名称

CSS3制作的图片3D旋转特效

分类

CSS3

描述

CSS3实现的图片三维旋转特效，若不使用CSS3的话，类似这种效果估计需要JavaScript配合，现在有了CSS3，似乎一切变得如此简单给力。不过目前IE8不支持CSS3，因此对于使用IE8的用户来说，只能是一大遗憾了，所以请大家使用火狐或Chrome浏览...