css3 3d旋转图片立方体特效代码

纯 CSS3 3D 旋转立方体动画特效，该 3D 立方体使用 CSS3 perspective 制作，可以在水平方向、垂直方向和平面视角方向旋转，使用 CSS 来制作立方体动画，效果非常好。下面来看看制作方法。
HTML 结构
立方体结构中，使用一个 wrapper div 来包裹立方体。在里面使用 6 个 div 来制作立方体的 6 个面。

<div class="wrap">    <div class="cube">        <div class="front">front</div>        <div class="back">back</div>        <div class="top">top</div>        <div class="bottom">bottom</div>        <div class="left">left</div>        <div class="right">right</div>    </div>
</div>

分别为立方体的六个面，使用 CSS 来将立方体的 6 个面放置到正确的位置上
CSS 样式
设置景深（perspective）：观察距离，更好的体现立体性
和变换原点（perspective-origin）：变换属性的原点

.wrap {  perspective: 800px; perspective-origin: 50% 100px;}

给包含立方体 6 个面的立方体的容器.cube 提供样式：

.cube {    /*添加相对定位*/position: relative;  width: 200px; /*形成3d空间*/transform-style: preserve-3d;}

给立方体容器 200 像素的宽度，并设置为相对定位，这样在它里面的立方体的 6 个面可以设置为绝对定位。preserve-3d 属性确保所有 6 个面都处于 3D 立体状态。给6个面设置统一样式：

.cube div {   /*绝对定位*/position: absolute; width: 200px;height: 200px;}

给立方体6 个面制作css变形效果，以使它们组装为一个立方体。

.back {    transform: translateZ(-100px) rotateY(180deg);}
.right {    transform: rotateY(-270deg) translateX(100px);    transform-origin: top right;}
.left {    transform: rotateY(270deg) translateX(-100px);    transform-origin: center left;}
.top {    transform: rotateX(-90deg) translateY(-100px);  transform-origin: top center;}.bottom { transform: rotateX(90deg) translateY(100px); transform-origin: bottom center;}.front {    transform: translateZ(100px);}

rotate 的值可以旋转立方体的各个面，使上面的文字处于正确的位置上。rotateX绕x轴旋转，rotateY绕y轴旋转
而translate的值使元素在指定容器移动。translateX在x轴移动，translateY在y轴移动，translateZ在Z轴上移动。
使6个面形成立方体
垂直旋转立方体

/*设置关键帧*/
@keyframes spin-vertical {    from { transform: rotateX(0); }  to { transform: rotateX(-360deg); }}
.cube-wrap.vertical .cube {    margin: 0 auto; transform-origin: 0 100px;/*使用关键帧 调整动画为匀速  一直运动*/    animation: spin-vertical 5s infinite linear;}
.cube-wrap.vertical .top {    transform: rotateX(-270deg) translateY(-100px);}
.cube-wrap.vertical .back {  transform: translateZ(-100px) rotateX(180deg;}.cube-wrap.vertical .bottom {    transform: rotateX(-90deg) translateY(100px);}

这样就完成了立方体的旋转特效。

css3 3d旋转图片立方体特效代码相关推荐

CSS3 3D旋转图片立方体特效
CSS3 3D旋转图片立方体特效代码. 效果图: 这是一个3D的立方体盒子给盒子添加动画属性使其可以转动. 原理: 原理其实很简单我们看到的一个立方体其实就是靠六个平面搭建起来的如图所示 :六 ...
CSS3 3d旋转图片立方体案例演示
2D动画旋转和位移的基础语法旋转的基础: 语法:transform:rotate() 1:旋转的是一个度数deg 2:默认情况下,绕着一个中心点进行转动 3:transform:rotatex()绕 ...
html图片鼠标动态效果代码,CSS3鼠标hover图片动画特效代码
这是一款CSS3鼠标hover图片动画特效代码.该鼠标hover动画使用简单的CSS transition技术,配合元素的宽度变化,制作出炫酷的鼠标hover图片遮罩层动画效果. 使用方法在页面中引 ...
3d旋转图片制作HTML,js css3制作3D旋转图片切换代码
特效描述:js css3 3D旋转图片切换,js css3酷炫的3D图片旋转切换,3D旋转的图片轮播代码.(不兼容IE6,7,8) 代码结构 1. 引入CSS 2. HTML代码 3D Rotatin ...
图片3d立方体旋转html代码,超酷3D立方体空间旋转图片画廊特效
这是一款效果非常炫酷的CSS3 3D立方体空间旋转图片画廊特效.该特效实际是一个3D立方体,在其内部显示图片.在点击立方体每一面的图片时,这张图片就会放大到屏幕的中间,效果非常的酷. 因为IE浏览器不 ...
HTML5七夕情人节表白网页(粉色的情人节爱心飞出ui特效) HTML+CSS+JavaScript 求婚示爱代码 520情人节告白代码程序员表白源码 3D旋转相册 js烟花代码 css爱心
HTML5七夕情人节表白网页❤粉色的情人节爱心飞出ui特效❤ HTML+CSS+JavaScript 求婚示爱代码 520情人节告白代码程序员表白源码 3D旋转相册 js烟花代码 css爱心表白这 ...
HTML5七夕情人节表白网页(情人节满屏爱心HTML5特效) HTML+CSS+JS 求婚 html生日快乐祝福代码网页 520情人节告白代码程序员表白源码抖音3D旋转相册 js烟花代码
HTML5七夕情人节表白网页❤情人节满屏爱心HTML5特效❤ HTML+CSS+JS 求婚 html生日快乐祝福代码网页 520情人节告白代码程序员表白源码抖音3D旋转相册 js烟花代码 css爱 ...
HTML5七夕情人节表白网页(抖音3D立方体图像库) HTML+CSS+JavaScript 求婚示爱代码 520情人节告白代码程序员表白源码 3D旋转相册 js烟花代码 css爱心表白
HTML5七夕情人节表白网页❤抖音❤3D立方体图像库❤ HTML+CSS+JavaScript 求婚示爱代码 520情人节告白代码程序员表白源码 3D旋转相册 js烟花代码 css爱心表白这是程序 ...
HTML5 3D旋转图片相册
H5旋转3D相册,鼠标放置暂停,图片灰度级为0,有放大效果. 该实例运用H5和CSS3动画效果,未用javascript.提高了本人对CSS3 新属性的了解及掌握. 完整代码如下: <!DOCT ...

css3 3d旋转图片立方体特效代码

css3 3d旋转图片立方体特效代码相关推荐

最新文章

热门文章