Pure css3 implementation of 3D cube rotation special effects code-CSS Tutorial-php.cn

Home

Web Front-end

CSS Tutorial

Pure css3 implementation of 3D cube rotation special effects code

May 17, 2017 pm 05:36 PM

In the NetEase front-end micro-professional course, there is an extracurricular assignment to implement a 3D rotating cube. I spent some time doing it, and it was interesting. I wrote a simple tutorial for everyone to learn. First put the final effect to be achieved.

&lt;!DOCTYPE html&gt;
&lt;html lang=&quot;en&quot;&gt;&lt;head&gt;&lt;meta charset=&quot;UTF-8&quot;&gt;&lt;title&gt;CSS3 3D立方体多边形动画特效 - 代码笔记&lt;/title&gt;&lt;style type=&quot;text/css&quot;&gt;*{
 margin:0 auto;
    padding:0;
}
@keyframes rotate{
    0%{
        transform:rotateX(0deg) rotateY(0deg);
    }
    100%{
        transform:rotateX(360deg) rotateY(360deg);
    }
}
html{
    background:linear-gradient(#ff0 0%, #000 80%);
    height:100%;
}
.wrap{
    margin-top:200px;
    perspective: 1000px; /* 视图距元素的距离 相当于摄像机 */
}
.cube{
    width:200px;
    height:200px;
    position:relative;
    color:#fff;
    font-size:36px;
    font-weight:bold;
    text-align:center;
    line-height:200px;
    transform-style:preserve-3d; /* 默认flat 2D */
    transform:rotateX(-30deg) rotateY(-70deg); 
    animation:rotate 20s infinite linear; /*播放时间 播放次数为循环 缓动效果为匀速 */
}
.cube &gt; div{
    width:100%;
    height:100%;
    border:1px solid #fff;
    position:absolute;
    background-color:#333;
    opacity:.6;
    transition:transform 0.4s ease-in;
}
.cube .out-front{
    transform: translateZ(100px);
}
.cube .out-back{
    transform: translateZ(-100px) rotateY(180deg);
}
.cube .out-left{
    transform: translateX(-100px) rotateY(-90deg);
}
.cube .out-right{ 
    transform: translateX(100px) rotateY(90deg);
}
.cube .out-top{
    transform: translateY(-100px) rotateX(90deg);
}
.cube .out-bottom{
    transform: translateY(100px) rotateX(-90deg);
}
.cube &gt; span{
    display:block;
    width:100px;
    height:100px;
    border:1px solid black;
    background-color:#999;
    position:absolute;
    top:50px;
    left:50px;
}
.cube .in-front{
    transform: translateZ(50px);
}
.cube .in-back{
    transform: translateZ(-50px) rotateY(180deg);
}
.cube .in-left{
    transform: translateX(-50px) rotateY(-90deg);
}
.cube .in-right{
    transform: translateX(50px) rotateY(90deg);
}
.cube .in-top{
    transform: translateY(-50px) rotateX(90deg);
}
.cube .in-bottom{
    transform: translateY(50px) rotateX(-90deg);
}
.wrap:hover .out-front{
    transform: translateZ(200px);
}
.wrap:hover .out-back{
    transform: translateZ(-200px) rotateY(180deg);
}
.wrap:hover .out-left{
    transform: translateX(-200px) rotateY(-90deg);
}
.wrap:hover .out-right{
    transform: translateX(200px) rotateY(90deg);
}
.wrap:hover .out-top{
    transform: translateY(-200px) rotateX(90deg);
}
.wrap:hover .out-bottom{
    transform: translateY(200px) rotateX(-90deg);
}
 
&lt;/style&gt;
&lt;/head&gt;
&lt;body&gt;
&lt;div class=&quot;wrap&quot;&gt;
    &lt;div class=&quot;cube&quot;&gt;
        &lt;div class=&quot;out-front&quot;&gt;前面&lt;/div&gt;
        &lt;div class=&quot;out-back&quot;&gt;后面&lt;/div&gt;
        &lt;div class=&quot;out-left&quot;&gt;左面&lt;/div&gt;
        &lt;div class=&quot;out-right&quot;&gt;右面&lt;/div&gt; 
        &lt;div class=&quot;out-top&quot;&gt;上面&lt;/div&gt;
        &lt;div class=&quot;out-bottom&quot;&gt;下面&lt;/div&gt;
 
        &lt;span class=&quot;in-front&quot;&gt;&lt;/span&gt;
        &lt;span class=&quot;in-back&quot;&gt;&lt;/span&gt;
        &lt;span class=&quot;in-left&quot;&gt;&lt;/span&gt;
        &lt;span class=&quot;in-right&quot;&gt;&lt;/span&gt;
        &lt;span class=&quot;in-top&quot;&gt;&lt;/span&gt;
        &lt;span class=&quot;in-bottom&quot;&gt;&lt;/span&gt;
    &lt;/div&gt;
&lt;/div&gt;
 
&lt;div style=&quot;text-align:center;margin:50px 0; font:normal 14px/24px &#39;MicroSoft YaHei&#39;;&quot;&gt;
&lt;p&gt;适用浏览器:360、FireFox、Chrome、Opera、傲游、搜狗、世界之窗. 不支持Safari、IE8及以下浏览器。&lt;/p&gt;
&lt;/div&gt;
&lt;/body&gt;
&lt;/html&gt;

Copy after login

【Related recommendations】

1. Special recommendation:" PHP Programmer Toolbox" V0.1 version download

2. Free css online video tutorial

3. php.cn Dugu Jiujian (2)-css video tutorial

The above is the detailed content of Pure css3 implementation of 3D cube rotation special effects code. For more information, please follow other related articles on the PHP Chinese website!

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