css3实现酷炫的3D盒子翻转效果

简介

运用css3先在平面空间组成立方体盒子,再让整个盒子翻转起来,先来张效果图:

步骤

1.先用css将6张图片摆成下图的样子:

下面就是通过css3的3D变换将每个面进行翻转,使之成为一个立体的盒子,代码如下:

//左面
.pic2{
    transform:rotateY(90deg);  //沿y轴翻转90度
    transform-origin:right;   //以右边为轴
}

//前面
.pic6{
    transform:translateZ(100%);  //垂直屏幕向外移动立方体的长度
}

其他几个面按照同样的方式进行翻转就行

2.为整个立方体添加动画

三维的盒子完成后,只要为整个盒子添加动画,三维盒子就会跟着一起翻转达到了翻转的效果:

//自定义动画样式
@keyframes mySec{
    0%{transform:rotateX(0deg) rotateY(0deg) rotateZ(0deg);}           //按自己的要求添加样式,分割动画帧数
    50%{transform:rotateX(230deg) rotateY(-20deg) rotateZ(-90deg);}
    100%{transform:rotateX(-360deg) rotateY(360deg) rotateZ(-360deg);}
}

//为容器添加样式
.myDiv{
    animation:mySec 7s infinite;  //调用动画
    transform-style:preserve-3d;  //指定容器嵌套元素三维呈现效果
    perspective:1000px;           //规定3D元素的透视效果
}

还可以为单个面应用动画,步骤同上,只要计算好动画持续及延迟时间就能达到酷炫的效果!

最终效果

若有不足之处,欢迎小伙伴指正!

时间: 2024-10-19 06:47:56

css3实现酷炫的3D盒子翻转效果的相关文章

Android之——史上最简单最酷炫的3D图片浏览效果的实现

转载请注明出处:http://blog.csdn.net/l1028386804/article/details/48052709 如今,Android开发已经成为移动互联开发领域中一支不可或缺的力量,那么Android中要实现3D的效果那也就是合情合理的事情了.那么,如何在Android中实现像IOS中那样的3D图片浏览效果呢?下面,鄙人将重磅推出今天的重点博文,和大家一起在Android中实现酷炫的3D图片浏览效果. 一.原理 老规矩,还是要来啰嗦下原理的东西. 整体实现是以手机屏幕的正中间

【CSS进阶】试试酷炫的 3D 视角

写这篇文章的缘由是因为看到了这个页面: 戳我看看(移动端页面,使用模拟器观看) 运用 CSS3 完成的 3D 视角,虽然有一些晕3D,但是使人置身于其中的交互体验感觉非常棒,运用在移动端制作一些 H5 页面可谓十分博人眼球. 并且掌握原理之后制作起来也并不算废力,好好的研究了一番后将一些学习过程共享给大家. 下面进入正文:(一些 Gif 图片较大,需要等待一会) 3D 效果示意 百闻不如一见,先直观感受一下上述我所说的效果: 最好能点进去看看,这里我使用了带背景色的 div 作为示例,我们的视角

新潮又酷炫,3D打印鞋离你有多远?

新潮.酷炫,是很多时尚一族不变的追求与信仰.身为潮流达人的你,是否注意到近来在运动圈与3D打印圈频繁曝光的新晋主角--3D打印鞋?譬如,轻盈舒适.拒绝水分的耐克Flyprint 3D,一体成型.无缝衔接的匹克FUTURE 3.0,实现了个性化定制的阿迪达斯Futurecraft 4D,更加轻便.更强抓地的锐步Liquid Floatride Run等等.这些顶着3D打印光环的新一代鞋品,是不是让你眼界大开.跃跃欲试呢? 先别着急摸你的钱包,今天咱们一起来看看,加持了3D打印黑科技的运动鞋,跟你穿

仿智能社官网:原生JS实现简单又酷炫的3D立方体时钟

先放一下我做的效果:https://linrunzheng.github.io/3Dclock/3Dclock/new.html 至于3D立方体怎么做这里就不在阐述了,可以看一下我之前的博客. 这里默认你已经做好了6个立方体,直接上JS代码: 页面进来的时候,先给6个立方体赋值上现在的时间,由于立方体比较小,左右2个面看不清且影响效果,这里左右2个面就不赋time了: //获取元素 var oul = document.querySelectorAll("ul"); var back

css3实现3D立体翻转效果

1.在IE下无法显示翻转效果,火狐和谷歌可以 1 /*样式css*/ 2 3 .nav-menu li { 4 display: inline; 5 } 6 .nav-menu li a { 7 color: #fff; 8 display: block; 9 text-decoration: none; 10 overflow: visible; 11 line-height: 40px; 12 font-size: 20px; 13 width:200px; 14 height: 50px;

个人学习JQ插件编写成果:little酷炫的图片滑动切换效果

工作一个多月了,好久没来冒冒泡了,看了@wayong的JQ插件教程,自己编写了一个模仿拉勾网首页广告栏滑动特效的JQ插件,现在跟朋友们分享分享! 先上demo链接:http://runjs.cn/detail/gpowdhhk 快要下班了~先把代码放出来~~回家再编辑~ 这里是HTML代码: 1 <!--js酷炫图片滑动hover效果,类似拉勾网--> 2 <div class="beauty-go-outer" id="my-div"> 3

【CSS3进阶】酷炫的3D旋转透视

之前学习 react+webpack ,偶然路过 webpack 官网 ,看到顶部的 LOGO ,就很感兴趣. 最近觉得自己 CSS3 过于薄弱,想着深入学习一番,遂以这个 LOGO 为切入口,好好研究学习了一下相关的 CSS3 属性.webpack 的 LOGO 动画效果乍看不是很难,深入了解之后,觉得内部其实大有学问,自己折腾了一番,做了一系列相关的 CSS3 动画效果. 先上 demo ,没有将精力放在兼容上,请用 chrome 打开. 本文完整的代码,以及更多的 CSS3 效果,在我 g

Html + Css3 制作酷炫的导航栏

主要亮点: 1 ul 水平显示 2 li 去掉圆点 3 li中字体水平.竖直居中 4 li控制边框样式 5 使用html + css3 渐变画图 制作背景图片 6 更改颜色透明度 7 DIV制作边框阴影 先看效果图: 实现代码: <!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <!----编码-----> <meta nam

CSS3实现酷炫导航

上面是一个效果图,代码在下面: html <html> <head> <meta charset="utf-8"/> <title>CSS3 实现的导航</title> <link type="text/css" rel="stylesheet" href="nav.css" /> <base target="_blank" hr