用css实现3D立方体旋转特效
先来看运行后出来的效果
它是在不停运行的一个立方体
先来看html部分的代码
<div class="rect-wrap"> <!--舞台元素,设置perspective,让其子元素获得透视效果。-->
<div class="container"> <!-- 容器,设置transform-style: preserve-3d,让其子元素在3D空间呈现-->
<div class="top slide"></div> <!--立方体的六个面-->
<div class="bottom slide"></div>
<div class="left slide"></div>
<div class="right slide"></div>
<div class="front slide"></div>
<div class="back slide"></div>
</div>
</div>
先建出来六个div然后再依次给它们设置样式
再来看它们的样式表
<style type="text/css">
.rect-wrap {
position: relative;
perspective: 1600px;
}
.container {
width: 800px;
height: 800px;
transform-style: preserve-3d;
transform-origin: 50% 50% 200px; /*设置3d空间的原点在平面中心再向Z轴移动200px的位置*/
}
.slide {
width: 400px;
height: 400px;
position: absolute; //定位
}
.top {
left: 200px;
top: -200px;
transform: rotateX(-90deg);
transform-origin: bottom;
background-color:#C69
}
.bottom {
left: 200px;
bottom: -200px;
transform: rotateX(90deg);
transform-origin: top;
background-color:#6FF
}
.left {
left: -200px;
top: 200px;
transform: rotateY(90deg);
transform-origin: right;
background-color:#9F0
}
.right {
left: 600px;
top: 200px;
transform: rotateY(-90deg);
transform-origin: left;
background-color:#33F
}
.front {
left: 200px;
top: 200px;
transform: translateZ(400px);
background-color:#366 /*立方体前面正对着屏幕,所以不用旋转,只需向Z轴前移动距离*/ }
.back {
left: 200px;
top: 200px;
transform: translateZ(0);
background-color:#09F /*立方体后面正对着屏幕,所以不用旋转,只需向Z轴后移动距离*/
}
@keyframes rotate-frame {
0% {
transform: rotateX(0deg) rotateY(0deg);
}
10% {
transform: rotateX(0deg) rotateY(180deg);
}
20% {
transform: rotateX(-180deg) rotateY(180deg);
}
30% {
transform: rotateX(-360deg) rotateY(180deg);
}
40% {
transform: rotateX(-360deg) rotateY(360deg);
}
50% {
transform: rotateX(-180deg) rotateY(360deg);
}
60% {
transform: rotateX(90deg) rotateY(180deg);
}
70% {
transform: rotateX(0) rotateY(180deg);
}
80% {
transform: rotateX(90deg) rotateY(90deg);
}
90% {
transform: rotateX(90deg) rotateY(0);
}
100% {
transform: rotateX(0) rotateY(0);
}
}
.container{
animation: rotate-frame 30s linear infinite;
} </style>
代码只有这些便可以实现3D旋转了
也可以变成图片的,可以这样做
在每个div里都加上图片,然后给每个图片设置成统一名字,再给他们统一样式,设置高和宽就好了
可以粘贴复制代码,都来试试吧
用css实现3D立方体旋转特效的更多相关文章
- css实现3D立方体旋转特效
先来看运行后出来的效果 它是在不停运行的一个立方体 先来看html部分的代码 <div class="rect-wrap"> <!--舞台元素,设置perspec ...
- 基于css3的3D立方体旋转特效
今天给大家分享一款基于css3的3D立方体旋转特效.这款特效适用浏览器:360.FireFox.Chrome.Safari.Opera.傲游.搜狗.世界之窗. 不支持IE8及以下浏览器.效果图如下 : ...
- 网页特效:用CSS3制作3D图片立方体旋转特效
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title&g ...
- 制作3D图片立方体旋转特效
<!DOCTYPE html><html><head><meta charset="utf-8" /><title>CS ...
- jQuery可拖拽3D万花筒旋转特效
这是一个使用了CSS3立体效果的强大特效,本特效使用jQuery跟CSS3 transform来实现在用户鼠标按下拖动时,环形图片墙可以跟随鼠标进行3D旋转动画. 效果体验:http://hovert ...
- css3-实现3D立方体旋转
核心内容: 1.CSS3 中 animation.perspective 属性的熟练运用. 2.CSS3 中的变形属性 transform,在 3D 立体效果中的运用. 3.3D 立方体旋转实现原理. ...
- 基于css3新属性transform及原生js实现鼠标拖动3d立方体旋转
基于css3新属性transform,实现3d立方体的旋转 通过原生JS,点击事件,鼠标按下.鼠标抬起和鼠标移动事件,实现3d立方体的拖动旋转,并将旋转角度实时的反应至界面上显示 实现原理:通过获取鼠 ...
- html + css 01: 3d立方体
html + css实现3d立方体 css代码 /*页面背景色*/ body{ background-color: black; background-repeat:no-repeat; } /*** ...
- jquery环形3D立体旋转特效
jquery环形3D立体旋转特效 作者/代码整理:站长素材 (转载请附加本文地址,带有“懒人原生”字样的谢绝转载)发布日期:2013-07-20 立体效果比较强的jquery特效,周围小图组 ...
随机推荐
- Angular - - ngReadonly、ngSelected、ngDisabled
ngReadonly 该指令将input,textarea等文本输入设置为只读. HTML规范不允许浏览器保存类似readonly的布尔值属性.如果我们将一个Angular的插入值表达式转换为这样的属 ...
- Angular - - ngApp、ngBind、ngBindHtml、ngNonBindable
对于ng-系列的指令,每篇文章写2-5个吧,不然显得文章好短.... ngApp 使用这个指令自动启动一个AngularJS应用.ngApp指令指定了应用程序的根节点,通常会将ngApp放置在网页的根 ...
- ImageView及其子类(二)
实例:强大的图片按钮 下面的实例定义了多个图片按钮,并定义了两个ZoomButton.两个ZoomButton的android:src属性分别指定为@android:drawable/btn_minu ...
- 使用IDEA开发及测试Spark的环境搭建及简单测试
一.安装JDK(具体安装省略) 二.安装Scala(具体安装省略) 三.安装IDEA 1.打开后会看到如下,然后点击OK
- pureMVC简单示例及其原理讲解五(Facade)
本节将讲述Facade,Proxy.Mediator.Command的统一管家.自定义Facade必须继承Facade,在本示例中自定义Facade名称为ApplicationFacade,这个名称也 ...
- Bootstrap入门(三十)JS插件7:警告框
Bootstrap入门(三十)JS插件7:警告框 通过这个插件可以为警告信息添加点击以及消失的功能. 当使用一个.close按钮,它必须是第一个子元素.alert-dismissible,并没有文字内 ...
- MyBatis浅尝笔记
MyBatis应属于一种轻量级的java持久层技术,它通过简单的SQL xml或注解,将数据库数据映射到接口与POJO.最近项目要用到mybatis,所以学习之后在这里做个总结,文中的示例以xml配置 ...
- CodeForces 460B
Little Dima and Equation Time Limit:1000MS Memory Limit:262144KB 64bit IO Format:%I64d & ...
- Hadoop学习笔记-008-CentOS_6.5_64_yum安装mysql
******************************卸载mysql***************************** 第一步,查看centos上是否已经安装了mysql数据库 # rp ...
- SpringBoot 入门教程:集成mybatis,redis
SrpingBoot相较于传统的项目具有配置简单,能快速进行开发的特点,花更少的时间在各类配置文件上,更多时间在具体业务逻辑上. SPringBoot采用纯注解方式进行配置,不喜欢xml配置的同学得仔 ...