<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>css3旋转立方体效果</title>
<style type="text/css">
*{
margin: 0;
padding: 0;
}
.box{
width: 400px;
height: 400px;
border: 1px solid #000;
margin: 30px auto;
perspective: 1200px;/*设置元素被查看位置的视图----景深 看物体的远近 数值大越远*/
-webkit-perspective: 1200px; /* Safari 和 Chrome */
}
.box ul{
width: 300px;
height: 300px;
border: 1px solid #000000;
position: relative;
transform-style: preserve-3d; /*设置3d场景*/
-webkit-transform-style: preserve-3d; /* Safari 和 Chrome */
animation: move 2s infinite linear; /*运动时间代表动画循环快慢*/
transform-origin: center center 150px; /*第三个需要给具体数值*/
-webkit-transform-origin:center center 150px;
margin: 50px;
}
.box ul li{
width: 300px;
height: 300px;
line-height: 300px;
position: absolute;
font-size: 50px;
transition: all .5s;
text-align: center;
list-style: none;
}
.box ul li:nth-of-type(1){
background: red;
opacity: 0.5;
}
.box ul li:nth-of-type(2){
background: blue;
opacity: 0.5;
transform: translateX(300px) rotateY(-90deg);
-webkit-transform: translateX(300px) rotateY(-90deg); /* Safari 和 Chrome */
transform-origin: left;
-webkit-transform-origin:left;
}
.box ul li:nth-of-type(3){
background: blueviolet;
opacity: 0.5;
transform: translateX(-300px) rotateY(90deg);
-webkit-transform: translateX(-300px) rotateY(90deg);
transform-origin: right;
-webkit-transform-origin:right;
}
.box ul li:nth-of-type(4){
background: brown;
opacity: 0.5;
transform: translateY(-300px) rotateX(-90deg);
-webkit-transform: translateY(-300px) rotateX(-90deg);
transform-origin: bottom;
-webkit-transform-origin:bottom;
}
.box ul li:nth-of-type(5){
background: deeppink;
opacity: 0.5;
transform: translateY(300px) rotateX(90deg);
-webkit-transform: translateY(300px) rotateX(90deg);
transform-origin: top;
-webkit-transform-origin:top;
}
.box ul li:nth-of-type(6){
background: yellow;
opacity: 0.5;
transform: translateZ(300px);
-webkit-transform: translateZ(300px);
}
@keyframes move{
from{transform: rotateY(0deg);}
to{transform: rotateY(360deg);}
}
@-webkit-keyframes move{
from{-webkit-transform: rotateY(0deg);}
to{-webkit-transform: rotateY(360deg);}
}
</style>
</head>
<body>
<div class="box">
<ul>
<li>最骚的css3</li>
<li>最骚的css3</li>
<li>最骚的css3</li>
<li>最骚的css3</li>
<li>最骚的css3</li>
<li>最骚的css3</li>
</ul>
</div>
</body>
</html>

纯手写的css3正方体旋转效果的更多相关文章

  1. springmvc 动态代理 JDK实现与模拟JDK纯手写实现。

    首先明白 动态代理和静态代理的区别: 静态代理:①持有被代理类的引用  ② 代理类一开始就被加载到内存中了(非常重要) 动态代理:JDK中的动态代理中的代理类是动态生成的.并且生成的动态代理类为$Pr ...

  2. 简易-五星评分-jQuery纯手写

    超级简单的评分功能,分为四个步骤轻松搞定: 第一步: 引入jquery文件:这里我用百度CDN的jquery: <script src="http://apps.bdimg.com/l ...

  3. vue10行代码实现上拉翻页加载更多数据,纯手写js实现下拉刷新上拉翻页不引用任何第三方插件

    vue10行代码实现上拉翻页加载更多数据,纯手写js实现下拉刷新上拉翻页不引用任何第三方插件/库 一提到移动端的下拉刷新上拉翻页,你可能就会想到iScroll插件,没错iScroll是一个高性能,资源 ...

  4. 超级简单的jQuery纯手写五星评分效果

    超级简单的评分功能,分为四个步骤轻松搞定: 第一步: 引入jquery文件:这里我用百度CDN的jquery: <script src="http://apps.bdimg.com/l ...

  5. 纯手写Myatis框架

    1.接口层-和数据库交互的方式 MyBatis和数据库的交互有两种方式: 使用传统的MyBatis提供的API: 使用Mapper接口: 2.使用Mapper接口 MyBatis 将配置文件中的每一个 ...

  6. SQL纯手写创建数据库到表内内容

    建表啥的只点点鼠标,太外行了,不如来看看我的纯手写,让表从无到有一系列:还有存储过程临时表,不间断的重排序: 一:建数据库 create Database Show on primary ( name ...

  7. 纯手写SpringMVC到SpringBoot框架项目实战

    引言 Spring Boot其设计目的是用来简化新Spring应用的初始搭建以及开发过程.该框架使用了特定的方式来进行配置,从而使开发人员不再需要定义样板化的配置. 通过这种方式,springboot ...

  8. css3纯手写loading效果

    <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> ...

  9. 纯手写实现ajax分页功能

    前言 最近用到了这个功能,百度大半天,网上的不是有各种问题就是需要引入其他的插件,无奈,只能自己写,大致功能已经完成.前端页面用bootstrap做样式,分页功能用ajax实现,没用其他插件哦,只引入 ...

随机推荐

  1. uses-permission和permission详解

    1.<uses-permission>: 官方描述: If an application needs access to a feature protected by a permissi ...

  2. SideBar---fixed定位

      <style> /*外层fixed*/ body{ width:2000px; height:2000px; background:#000; } .wrap { position: ...

  3. Java中文&编码问题小结

    转自:http://www.blogjava.net/zhugf000/archive/2005/10/09/15068.html Java字符编码转换过程说明 常见问题 JVM JVM启动后,JVM ...

  4. [Selenium] The commonly used validation method

    Assert.assertTrue(tmpEl.getAttribute("class").contains("selected"),"The fol ...

  5. Power Crisis

    传送门 这道题被严重恶意评分了,实际应该是绿题. 因为其实我们只需要模拟即可.这里我们引入一种新的东西:约瑟夫环. 它能直接告诉你约瑟夫问题中最后一个存活下来的人是谁.(不过下标是从0开始的,实际使用 ...

  6. How to study Watir?

    我在群空间,总是看到很多Watir新手,反复的问:我对元素的定位怎么又出错?我该从哪里着手啊?我给一个我认为最简单方便的学习方法.1. Ruby语法基础要入门,网上有一个不到2M的帮助文档,从头到尾仔 ...

  7. thinkpad开机引导方式变成PCI LAN选项解决

    问题:开机的引导方式变成[PCI LAN],并且前面有一个小箭头,无法正常启动加载.在BIOS中重置调整启动顺序也无法解决.无法进入U盘启动盘 1.首先开机按F12进入BIOS,选择 APP Menu ...

  8. ASP.NET Core MVC 2.x 全面教程_ASP.NET Core MVC 24. Logging

    常用的诊断中间件: UseDeveloperExceptionPage UseStatusCodePages:返回 400~600 的状态码 UseExceptionHandler 自定义异常的处理器 ...

  9. Spring之配置文件加载方式

    spring在org.springframework.core.io包中提供了多种配置文件加载方式.无论是XML.URL还是文件,都有很好的支持.比如基于URL的UrlResource.基于输入流的I ...

  10. 斯坦福CS231n—深度学习与计算机视觉----学习笔记 课时2

    课时2 计算机视觉历史回顾与介绍中 1966年是计算机视觉的诞生年. 视觉处理流程的第一步,是对简单的形状结构处理,边缘排列. 边缘决定了结构. David Marr写了一本非常有影响力的书,视觉是分 ...