Home > Article > Web Front-end > CSS3-3D翻转_html/css_WEB-ITnose
CSS3-3D翻转_html/css_WEB-ITnose
- WBOYOriginal
- 2016-06-24 11:27:541752browse
本案例主要是css3和html5，不会js也可以做动画◕.◕
一、首先看下主要需要的样式：
perspective
transform
transition
position
classList
就这么多，水平有限就不细讲啦！
二、看效果：演示效果，runjs
3个效果默认样式如上图
看起来好乱，还是看演示吧，不放图了==演示效果，runjs
三、html结构如下：
3个容器6个盒子，当鼠标经过时：
1.box1绕X轴（transform-origin默认容器中心），翻转180°至背面box2，鼠标移开翻回
2.box3绕Y轴（transform-origin默认容器中心），翻转180°至背面box4，鼠标移开翻回
3.box5，box6绕Z轴，（transform-origin分别为容器左右），翻转180°，鼠标移开翻回
<body> <div class="container" ontouchstart="this.classList.toggle('hover');"> <div class="box1"> <span>hello~</span> </div> <div class="box2"> <span>bye~</span> </div> </div> <div class="container" ontouchstart="this.classList.toggle('hover');"> <div class="box3"> <span>hello~</span> </div> <div class="box4"> <span>bye~</span> </div> </div> <div class="container" ontouchstart="this.classList.toggle('hover');"> <div class="box5"> <span>bye~</span> </div> <div class="box6"> <span>hello~</span> </div> </div></body>
四、下面是样式：
1.容器上加了perspective子元素box有透视效果
2.box2,box4是背面所以先翻转-180°，这样当翻到后面再翻回时符合正常视觉
3.每个box都加了backface-visibility：隐藏被旋转的 div 元素的背面
4.box5，box6，改了旋转中心点
<style> .container { perspective: 400px; transform-style: preserve-3d; position: relative; } .container, .box1, .box2, .box3, .box4, .box5, .box6 { width: 260px; height: 160px; } .box1, .box2, .box3, .box4, .box5, .box6 { backface-visibility: hidden; transition: 1s; transform-style: preserve-3d; position: absolute; top: 0; left: 300px; text-align: center; } .box1 { background-color:pink; } .box2 { background-color:red; transform: rotateX(-180deg); } .box3 { background-color:red; } .box4 { background-color:pink; transform: rotateY(-180deg); } .box5 { background-color:red; transform-origin:left; } .box6 { background-color:pink; transform-origin:right; } span{ font-size: 20px; line-height: 160px; } .container:hover .box1 {transform: rotateX(180deg);} .container:hover .box2 {transform: rotateX(0deg);} .container:hover .box3 {transform: rotateY(180deg);} .container:hover .box4 {transform: rotateY(0deg);} .container:hover .box5 {transform: rotateZ(180deg);} .container:hover .box6 {transform: rotateZ(-180deg);} </style> 是不是很简单，接下来随意翻腾吧~
五、结语
Statement：
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
Previous article：<Canvas> 使用canvas画图并充当背景图片，但出现奇怪效果_html/css_WEB-ITnoseNext article：Less.js 2.6.0 发布，CSS 预处理器_html/css_WEB-ITnose