使用纯CSS3实现一个3D旋转的书本_html/css_WEB-ITnose
有一些前沿的电商网站已经开始使用3D模型来展示商品并支持在线定制,而其中图书的展示是最为简单的一种,
无需复杂的建模过程,使用图片和CSS3的一些变换即可实现更好的展示效果,简洁而实用。
书本的3D模型是所有商品中最为简单的,因为其本质上就是一个立方体(cube),只是带有封面/封底和左侧封条。
所以要构造一个3D书本展示,问题就被分解为构造一个立方体+旋转+图片背景。
1. 构造一个立方体要创建一个立方体,首先我们需要创建一个虚拟的三维视觉空间,这可以通过设置包容器元素的perspective属性获得。
.stage { width: 200px; height: 260px; perspective: 1000px; perspective-origin: center center;// 缺省值,可忽略}
<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>
我们需要根据书本的厚度和长宽来确定立方体各个面的坐标位置,在本例中所用书本模型(一本MySQL书)的绝对厚度为18.2px,高度260px,宽度197.6px。
那么根据简单的几何知识,前后面距离立方体中心的距离为18.2/2=9.1px,其中“后”元素需要再翻转一下(即“背”过去)。
.front { transform: translateZ(9.1px);}.back { transform: rotateY(180deg) translateZ(9.1px);}
.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;}
.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;}
这个比较简单,使用rotateY方法就可以。
@-webkit-keyframes rotate { 0% { transform: rotateY(0) translateX(-18.2px); } 100% { transform: rotateY(360deg) translateX(-18.2px); }}
你可以在踏得网上自己试试看 (http://wow.techbrood.com/fiddle/17587)。
by iefreer

Alat AI Hot

Undresser.AI Undress
Apl berkuasa AI untuk mencipta foto bogel yang realistik

AI Clothes Remover
Alat AI dalam talian untuk mengeluarkan pakaian daripada foto.

Undress AI Tool
Gambar buka pakaian secara percuma

Clothoff.io
Penyingkiran pakaian AI

AI Hentai Generator
Menjana ai hentai secara percuma.

Artikel Panas

Alat panas

Notepad++7.3.1
Editor kod yang mudah digunakan dan percuma

SublimeText3 versi Cina
Versi Cina, sangat mudah digunakan

Hantar Studio 13.0.1
Persekitaran pembangunan bersepadu PHP yang berkuasa

Dreamweaver CS6
Alat pembangunan web visual

SublimeText3 versi Mac
Perisian penyuntingan kod peringkat Tuhan (SublimeText3)

Topik panas



Artikel ini membincangkan html & lt; kemajuan & gt; elemen, tujuan, gaya, dan perbezaan dari & lt; meter & gt; elemen. Tumpuan utama adalah menggunakan & lt; kemajuan & gt; untuk menyelesaikan tugas dan & lt; meter & gt; untuk stati

Artikel ini membincangkan html & lt; datalist & gt; elemen, yang meningkatkan bentuk dengan menyediakan cadangan autokomplete, meningkatkan pengalaman pengguna dan mengurangkan kesilapan. Kira -kira: 159

Artikel membincangkan amalan terbaik untuk memastikan keserasian silang pelayar HTML5, memberi tumpuan kepada pengesanan ciri, peningkatan progresif, dan kaedah ujian.

Artikel ini membincangkan html & lt; meter & gt; elemen, digunakan untuk memaparkan nilai skalar atau pecahan dalam julat, dan aplikasi umum dalam pembangunan web. Ia membezakan & lt; meter & gt; dari & lt; kemajuan & gt; dan Ex

Artikel ini membincangkan menggunakan atribut pengesahan bentuk HTML5 seperti had, corak, min, max, dan panjang untuk mengesahkan input pengguna secara langsung dalam penyemak imbas.

Artikel ini menerangkan html5 & lt; time & gt; elemen untuk perwakilan tarikh/masa semantik. Ia menekankan pentingnya atribut DateTime untuk pembacaan mesin (format ISO 8601) bersama teks yang boleh dibaca manusia, meningkatkan aksesibilit

Artikel ini membincangkan tag Meta Viewport, penting untuk reka bentuk web responsif pada peranti mudah alih. Ia menerangkan bagaimana penggunaan yang betul memastikan skala kandungan yang optimum dan interaksi pengguna, sementara penyalahgunaan boleh membawa kepada isu reka bentuk dan kebolehaksesan.

Artikel ini membincangkan & lt; iframe & gt; Tujuan TAG dalam membenamkan kandungan luaran ke dalam halaman web, kegunaan umum, risiko keselamatan, dan alternatif seperti tag objek dan API.
