帝国模板之家为广大用户提供专业、一站式建站服务。

网页特效

网页特效栏目收集了最全最新的前端网页插件,包括最流行的jQuery,Bootstrap,Js,Css,Vue等主流特效插件。

当前位置:首页 > 资源 > 网页特效 > 正文

css 3D翻转立方体照片墙动画特效

帝国模板之家 2020-12-12 网页特效 评论

介绍

使用css实现的立方体3D旋转特效,可以做3D 照片墙。当鼠标悬停在图像上时,会自己旋转,五个面用来展示图像,一个面用来介绍,非常炫酷。

使用方法

3D旋转照片墙特效css代码

/* ================================= 
  Base Element Styles
==================================== */

* {
    box-sizing: border-box;
}
body {
    font: 1em/1.5 'Open Sans', sans-serif;
    color: #373737;
    background: #eaeaea;
    margin: 0;
}
a {
    text-decoration: none;
}
h1,
h2,
h3 {
    text-transform: uppercase;
}
h2 {
    font-size: 1.125em;
    color: #4a89ca;
    font-weight: 600;
    margin: 0;
}
h3 {
    font-size: 1.3em;
    line-height: 1.25em;
    margin-top: .85em;
    margin-bottom: .5em;
}
p {
    font-size: .875em;
    line-height: 1.4;
    margin: 0 0 1.5em;
}

/* ================================= 
  Base Layout Styles
==================================== */

/* ---- Layout Containers ---- */

.container,
.content {
    margin: auto;
}
.container {
    width: 94.02985075%;
    max-width: 1260px;
    padding: 0 2.25em 4em;
    background: #fff;
}
.main-header {
    text-align: center;
    padding: 2.8em 0 3.8em;
}
.cube-container {
    max-width: 200px;
    text-align: center;
    margin: 0 auto 4.5em;
}
/* ---- Page Elements ---- */

.name {
    font-size: 1.65em;
    font-weight: 800;
    margin: 0 0 1.5em;
    line-height: 1;
}
.name span {
    font-weight: 300;
    margin-left: -7px;
}
.logo {
    width: 45px;
    margin-bottom: .4em;
    cursor: pointer;
}
.button {
    font-size: .8em;
    color: #fff;
    width: 90%;
    line-height: 1.15;
    font-weight: 700;
    display: block;
    text-decoration: none;
    text-transform: uppercase;
    padding: .95em 0;
    border-radius: .5em;
    background: rgba(74,137,202, .8);
    margin: auto;
}
/* ---- Photo Overlay ---- */

.photo-desc {
    font-size: .85em;
    color: #fff;
    padding: 1.1em 0.5em 0;
    background: #345d88;
}
/* ---- Float clearfix ---- */

.clearfix::after {
    content: " ";
    display: table;
    clear: both;
}

/* ================================= 
  Square styling
==================================== */

.front {
 background: #000;
}
.left {
 background: #8920F3;
}
.right {
 background: #F32089;
}
.top {
 background: #2089F3;
}
.bottom {
 background: #20F3F3;
}

.front h3 {
 color: #fff;
}
.cube-number {
 font-size: 3em;
}


/* ================================= 
  Media Queries
==================================== */

@media (min-width: 769px) {
    .cube-container {
        float: left;
        margin-left: 16.6%;
    }
}
@media (min-width: 1025px) {
    .cube-container:first-child {
        margin-left: 0;
    }
    .cube-container:last-child{
        float: right;
    }
    .content {
        max-width: 900px;
        margin: auto;
    }
}

/* ================================= 
  Button Transitions
==================================== */

.button {
    -webkit-transition: background .3s;
    transition: background .3s;
}
.button:hover {
    background: rgba(74,137,202, 1);
}





/* ================================= 
  Photo 3D Transforms & Transitions
==================================== */



.cube-container {
    box-shadow: 0 18px 40px 5px rgba(0,0,0,.4);
  -webkit-perspective: 800px;
  perspective: 800px;
  -webkit-transition: box-shadow 2s cubic-bezier(1.000, 0.010, 0.860, 0.040);
  transition: box-shadow 2s cubic-bezier(1.000, 0.010, 0.860, 0.040);
}

.cube-container:hover {
  box-shadow: 0 0 0 0 rgba(0,0,0,0);
  -webkit-transition: box-shadow 0.4s ease-out;
  transition: box-shadow 0.4s ease-out;
}


.photo-cube {
 -webkit-transition: -webkit-transform 2s ease-in-out;
 transition: -webkit-transform 2s ease-in-out;
 transition: transform 2s ease-in-out;
 transition: transform 2s ease-in-out, -webkit-transform 2s ease-in-out;
 width: 200px;
 height: 200px;
 -webkit-transform-style: preserve-3d;
 transform-style: preserve-3d;
}

.photo-cube:hover {
  -webkit-transform: rotateX(360deg) rotateY(-270deg);
  transform: rotateX(360deg) rotateY(-270deg);
}



.front,
.back,
.left,
.right,
.top,
.bottom {
  width: 200px;
  height: 200px;
  display: block;
  position: absolute;
}

.front {
  -webkit-transform: translateZ(100px);
  transform: translateZ(100px);
}

.back {
  -webkit-transform: translateZ(-100px) rotateY(270deg);
  transform: translateZ(-100px) rotateY(270deg);
  -webkit-transform-origin: center left;
  transform-origin: center left;
}

.left {
 -webkit-transform: rotateY(-270deg) translateX(100px);
 transform: rotateY(-270deg) translateX(100px);
 -webkit-transform-origin: top right;
 transform-origin: top right;
}

.right {
  -webkit-transform: translateZ(-100px) rotateY(180deg);
  transform: translateZ(-100px) rotateY(180deg);
}

.top {
  -webkit-transform: rotateX(-270deg) translateY(-100px);
  transform: rotateX(-270deg) translateY(-100px);
 -webkit-transform-origin: top center;
 transform-origin: top center;
}

.bottom {
  -webkit-transform: rotateX(270deg) translateY(100px);
  transform: rotateX(270deg) translateY(100px);
 -webkit-transform-origin: bottom center;
 transform-origin: bottom center;
}
这世上无忧无虑的人,反而相对寿命会长点。

已有 位小伙伴发表了看法

欢迎 发表评论

  • 匿名发表

关于

帝国cms模板

网页插件

帝国模板之家 | www.moyouyouw.cn

本站所有模板/文章除标明原创外,均来自网络转载,版权归原作者所有,如果有侵犯到您的权益,请联系站长删除,谢谢! 寻找帝国cms模板首选帝国模板之家,用心做站,上线至今广受好评,值得信赖!

  • 交流群1:帝国cms交流群1
  • 交流群2:帝国cms交流群2
在线QQ 给我留言