zoukankan      html  css  js  c++  java
  • css3实现立体魔方效果

    <!DOCTYPE html>
    <html>
    	<head>
    		<meta charset="utf-8">
    		<title>css3魔方</title>
    		<style>
    			div.box {
    				 300px;
    				height: 300px;
    				margin: 100px auto;
    				position: relative;
    				transform-style: preserve-3d;
    				animation: rotate 5s linear infinite alternate;
    			}
    			
    			div.box:hover{
    				animation-play-state: paused;
    			}
    			
    			@keyframes rotate{
    				0%{
    					transform: rotateX(0) rotateY(0) rotateZ(0);
    				}
    				
    				50%{
    					transform: rotateX(30deg) rotateY(34deg) rotateZ(50deg);
    				}
    				
    				100%{
    					transform: rotateX(60deg) rotateY(90deg) rotateZ(135deg);
    				}
    			}
    
    			div.face {
    				 300px;
    				height: 300px;
    				position: absolute;
    				display: flex;
    				flex-wrap: wrap;
    				justify-content: space-between;
    				align-content: space-between;
    			}
    
    			div.item {
    				 90px;
    				height: 90px;
    				border-radius: 10px;
    				text-align: center;
    				line-height: 90px;
    			}
    
    			.top .item {
    				background: red;
    			}
    
    			.top {
    				transform: rotateX(-90deg) translateZ(150px);
    			}
    
    			.bottom .item {
    				background: skyblue;
    			}
    
    			.bottom {
    				transform: rotateX(90deg) translateZ(150px);
    			}
    
    			.left .item {
    				background: chocolate;
    			}
    
    			.left {
    				transform: rotateY(90deg) translateZ(150px);
    			}
    
    			.right .item {
    				background: blue;
    			}
    
    			.right {
    				transform: rotateY(-90deg) translateZ(150px);
    			}
    
    			.front .item {
    				background: deepskyblue;
    			}
    
    			.front {
    				transform: translateZ(150px)
    			}
    
    			.back .item {
    				background: yellowgreen;
    			}
    
    			.back {
    				transform: translateZ(-150px) rotateY(-180deg);
    			}
    		</style>
    	</head>
    	<body>
    		<div class="box">
    			<div class="face front">
    				<div class="item">1</div>
    				<div class="item">2</div>
    				<div class="item">3</div>
    				<div class="item">4</div>
    				<div class="item">5</div>
    				<div class="item">6</div>
    				<div class="item">7</div>
    				<div class="item">8</div>
    				<div class="item">9</div>
    			</div>
    			<div class="face back">
    				<div class="item">1</div>
    				<div class="item">2</div>
    				<div class="item">3</div>
    				<div class="item">4</div>
    				<div class="item">5</div>
    				<div class="item">6</div>
    				<div class="item">7</div>
    				<div class="item">8</div>
    				<div class="item">9</div>
    
    			</div>
    			<div class="face left">
    				<div class="item">1</div>
    				<div class="item">2</div>
    				<div class="item">3</div>
    				<div class="item">4</div>
    				<div class="item">5</div>
    				<div class="item">6</div>
    				<div class="item">7</div>
    				<div class="item">8</div>
    				<div class="item">9</div>
    			</div>
    			<div class="face right">
    				<div class="item">1</div>
    				<div class="item">2</div>
    				<div class="item">3</div>
    				<div class="item">4</div>
    				<div class="item">5</div>
    				<div class="item">6</div>
    				<div class="item">7</div>
    				<div class="item">8</div>
    				<div class="item">9</div>
    			</div>
    			<div class="face top">
    				<div class="item">1</div>
    				<div class="item">2</div>
    				<div class="item">3</div>
    				<div class="item">4</div>
    				<div class="item">5</div>
    				<div class="item">6</div>
    				<div class="item">7</div>
    				<div class="item">8</div>
    				<div class="item">9</div>
    			</div>
    			<div class="face bottom">
    				<div class="item">1</div>
    				<div class="item">2</div>
    				<div class="item">3</div>
    				<div class="item">4</div>
    				<div class="item">5</div>
    				<div class="item">6</div>
    				<div class="item">7</div>
    				<div class="item">8</div>
    				<div class="item">9</div>
    			</div>
    		</div>
    	</body>
    </html>
    

      

  • 相关阅读:
    异常之【You have an error in your SQL syntax】
    Android 回调的理解,觉得写得好就转过来。。。收藏一下
    git 解决冲突方法
    最重要的“快捷键” IntelliJ IDEA
    Git 还没push 前可以做的事(转)
    android JNI(转)
    Windos下Android(ADT Bundle)配置NDK的两种方法------ADT、Cygwin、NDK配置汇总(转)
    warning C4819: 该文件包含不能在当前代码页(936)中表示的字符。请将该文件保存为 Unicode 格式以防止数据丢失
    android-ndk-r7b编译环境Cygwin工具搭建及配置(转)
    Eclipse Java常用快捷键(Eclipse Shortcut Keys for Java Top10)(转)
  • 原文地址:https://www.cnblogs.com/samsara-yx/p/12119898.html
Copyright © 2011-2022 走看看