Home > Web Front-end > HTML Tutorial > CSS3-3D翻转_html/css_WEB-ITnose

CSS3-3D翻转_html/css_WEB-ITnose

WBOY
Release: 2016-06-24 11:27:54
Original
1781 people have browsed it

本案例主要是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>
Copy after login

四、下面是样式:

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>
Copy after login

 是不是很简单,接下来随意翻腾吧~

 五、结语

Related labels:
source:php.cn
Statement of this Website
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
Popular Tutorials
More>
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template