使用纯CSS3实现一个3D旋转的书本
有一些前沿的电商站点已经開始使用3D模型来展示商品并支持在线定制,而当中图书的展示是最为简单的一种,
无需复杂的建模过程,使用图片和CSS3的一些变换就可以实现更好的展示效果,简洁而有用。
书本的3D模型是全部商品中最为简单的。由于其本质上就是一个立方体(cube)。仅仅是带有封面/封底和左側封条。
所以要构造一个3D书本展示,问题就被分解为构造一个立方体+旋转+图片背景。
1. 构造一个立方体
要创建一个立方体。首先我们须要创建一个虚拟的三维视觉空间。这能够通过设置包容器元素的perspective属性获得。
.stage {
width: 200px;
height: 260px;
perspective: 1000px;
perspective-origin: center center;// 缺省值,可忽略
}
上述代码把元素放在距离观察点1000px的地方(Z轴向),而且在X/Y轴向上居中。
<div class="stage">
<div class="cube">
<figure class="back"></figure>
<figure class="top"></figure>
<figure class="bottom"></figure>
<figure class="left"></figure>
<figure class="right"></figure>
<figure class="front"></figure>
</div>
</div>
接着。我们在包容器元素里面加入一个立方体元素,6个边(上下左右和前后),之所以使用figure。是由于须要支持贴图。
我们须要依据书本的厚度和长宽来确定立方体各个面的坐标位置。在本例中所用书本模型(一本MySQL书)的绝对厚度为18.2px。高度260px。宽度197.6px。
那么依据简单的几何知识,前后面距离立方体中心的距离为18.2/2=9.1px,当中“后”元素须要再翻转一下(即“背”过去)。
.front {
transform: translateZ(9.1px);
}
.back {
transform: rotateY(180deg) translateZ(9.1px);
}
用相似的计算方法。我们能够把其它4条边放置(平移+旋转变换)到各自的位置。从而拼装成一个虚拟的立方体。
.front {
transform: translateZ(9.1px);
}
.back {
transform: rotateY(180deg) translateZ(9.1px);
}
.top {
transform: rotateX(90deg) rotateZ(90deg) translateZ(98.8px) translateY(-89.7px);
width: 18.2px;
height: 197.6px;
}
.bottom {
transform: rotateX(-90deg) rotateZ(90deg) translateZ(161.2px) translateY(-89.7px);
}
.left {
transform: rotateY(-90deg) translateZ(9.1px);
width: 18.2px;
}
.right {
transform: rotateY(90deg) translateZ(188.5px);
width: 18.2px;
}
2. 加入封面
接着我们给前后以及左側面元素加入背景图(能够使用一张图,然后从不同的位置截取),给其它3个面加入背景颜色。并给“底”面加入阴影效果:
.front {
transform: translateZ(9.1px);
background: url("//wow.techbrood.com/uploads/160301/mysql.png") top right;
background-size: auto 100%;
}
.back {
transform: rotateY(180deg) translateZ(9.1px);
background: url("//wow.techbrood.com/uploads/160301/mysql.png") top left;
background-size: auto 100%;
}
.top {
transform: rotateX(90deg) rotateZ(90deg) translateZ(98.8px) translateY(-89.7px);
background: #fafafa;
width: 18.2px;
height: 197.6px;
}
.bottom {
transform: rotateX(-90deg) rotateZ(90deg) translateZ(161.2px) translateY(-89.7px);
background: #ccc;
width: 18.2px;
height: 197.6px;
-webkit-filter: drop-shadow(0 0 26px rgba(0, 0, 0, 0.75));
}
.left {
transform: rotateY(-90deg) translateZ(9.1px);
background: url("//wow.techbrood.com/uploads/160301/mysql.png") top center;
background-size: auto 100%;
width: 18.2px;
}
.right {
transform: rotateY(90deg) translateZ(188.5px);
background: #ddd;
background-size: auto 100%;
width: 18.2px;
}
这样我们就实现了一个逼真的3D书本视觉模型。
3. 加入旋转动画
这个比較简单,使用rotateY方法就能够。
@-webkit-keyframes rotate {
0% {
transform: rotateY(0) translateX(-18.2px);
}
100% {
transform: rotateY(360deg) translateX(-18.2px);
}
}
终于的效果图例如以下:
你能够在踏得网上自己试试看 (http://wow.techbrood.com/fiddle/17587)。
使用纯CSS3实现一个3D旋转的书本的更多相关文章
- 纯CSS3超酷3D旋转立方体动画特效
简要教程 这是一款神奇的纯 CSS3 立方体动画特效插件.使用CSS3来制作动画效果已经成为WEB前端开发的一种时尚,从简单的颜色和尺寸动画,到复杂的旋转.翻转动画, CSS3 展现了它无穷的魅力.使 ...
- 纯CSS3实现一个旋转的3D立方体盒子
简单介绍 上网易前端微专业课程,里面有一个课外作业是实现一个3D旋转立方体.花了点时间做了下.还有点意思.写个简单教程.供大家学习. 先放上终于要实现的效果 注:代码在chrome 43.0.2357 ...
- 纯css3响应式3d翻转菜单
前端开发whqet,csdn,王海庆,whqet,前端开发专家 周末快乐哈,今天来看一个纯CSS3实现的3d翻转菜单.3d响应式菜单,希望对大家有所帮助. 在线赞赏效果.在线编辑代码,或者下载收藏. ...
- 纯CSS3彩色边线3D立体按钮制作教程
原文:纯CSS3彩色边线3D立体按钮制作教程 今天我们来分享一款利用纯CSS3实现的3D按钮,这款按钮的一个特点是有彩色的边线,这让整个按钮显得比较多姿多彩,没那么枯燥无趣.本文不仅可以让大家看到演示 ...
- 2.纯 CSS 创作一个矩形旋转 loader 特效
原文地址:2.纯 CSS 创作一个矩形旋转 loader 特效 扩展后地址:https://scrimba.com/c/cNJVWUR 扩展地址:https://codepen.io/pen/ HT ...
- 纯css3实现的圆形旋转分享按钮
之前已经为大家介绍了好几款css3按钮,今天要为大家介绍的是一款纯css3实现的圆形旋转分享按钮.旋转的角度可以自己调整.在demo中演示了三个角度旋转.360度,60度,-360度.如图: 在线预览 ...
- 纯css3实现的3D按钮
前面已经为大家介绍了好多纯css3实现的按钮.今天要再给大家带来一款纯css3实现的3D按钮.在实例中给出了五种颜色的3D按钮.效果图如下: 在线预览 源码下载 实现的代码. html代码: &l ...
- 纯CSS炫酷3D旋转立方体进度条特效
在网站制作中,提高用户体验度是一项非常重要的任务.一个创意设计不但能吸引用户的眼球,还能大大的提高用户的体验.在这篇文章中,我们将大胆的将前面所学的3D立方体和进度条结合起来,制作一款纯CSS3的3D ...
- 使用CSS3实现一个3D相册
CSS3系列我已经写过两篇文章,感兴趣的同学可以先看一下CSS3初体验之奇技淫巧,CSS3 3D立方体效果-transform也不过如此 第一篇主要列出了一些常用或经典的CSS3技巧和方法:第二篇是一 ...
随机推荐
- SSO 中间件 kisso
SSO 中间件 kisso kisso = cookie sso,基于 Cookie 的 SSO 中间件.kisso 不是一套完整的登录系统, 它的定位是一把高速开发 java Web 单点登录系 ...
- 【开卷故意】JAVA正則表達式模版
专业既然是机器学习.那工作肯定也是继续和数据打交道,那么问题来了,非常多时候推荐算法和数据挖掘算法都是现成可用的,平台初建,重点还在数据过滤和抽取.如何高效的抽取数据? 利用往常算法比赛中经常使用的字 ...
- BZOJ 1696 [Usaco2007 Feb]Building A New Barn新牛舍 数学
题意:链接 方法:数学+模拟 解析: 首先这类问题不是第一次见了,所以直接知道拿x的中位数.y的中位数. 这题就是讨论情况很的烦. 题中有个限制,给出待求和的点不能选取. 所以假设奇数个点,求出x中位 ...
- 自定义控件学习——仿qq侧滑栏
效果 主要步骤: 1. 在xml布局里摆放内容. include 2. 在自定义ViewGroup里, 进行measure测量, layout布局 3. 响应用户的触摸事件 4. i ...
- 笔记四:onsubmit和onclick的区别
今天碰到关于表单提交的问题,我是用submit还是用onclick好呢,然后我去百度了一下两者的区别: onsubmit只能表单上使用,提交表单前会触发, onclick是按钮等控件使用, 用来触发点 ...
- C语言的多行宏定义
一.多行宏定义的使用 最近在跟STM32L011K4T6低功耗的源代码,发现使用了多行的宏定义来封装函数,记得之前把\给删除掉,编译程序就一直报错. \是续行操作符,也就是宏定义一行写不完,需要多行写 ...
- CISP/CISA 每日一题 21
CISSP 每日一题(答)What is the term that identifies data ona disk after the data has supposedly been erase ...
- ListView-divider 分割线的设置
1.去掉分割线 android:divider="@null" 2.设置分割线颜色跟宽度 android:divider="#19000000" android ...
- docker网络访问
一 docker网络访问 描述: 在启动容器的时候,如果不指定对应的参数,在容器外部是无法通过网络来访问容器内的网络应用和服务的.当容器中运行一些网络应用,要让外部访问这些应用时,可以通过-P或者-p ...
- ASP.NET MVC案例教程(基于ASP.NET MVC beta)——第一篇:准备工作
摘要 本文将简要介绍这个文章系列的目的.形式及大体内容.并且完成开始学习这个系列前所必要的准备工作. 前言 ASP.NET MVC作为微软官方的MVC解决方案,推出有一段时间了.可 ...