旋转的正方体

<!DOCTYPE html>
<html lang="zh-cmn-Hans">
<head>
<meta charset="utf-8" />
<title>backface-visibility_CSS参考手册_web前端开发参考手册系列</title>
<meta name="author" content="Joy Du(飘零雾雨), dooyoe@gmail.com" />
<meta name="copyright" content="www.doyoe.com" />
<style>
body {
-webkit-perspective: 800px;
perspective: 800px;
-webkit-perspective-origin: 50%;
perspective-origin: 50%;
}
.cube {
display: inline-block;
width: 100px;
height: 100px;
margin: 50px;
-webkit-transform-style: preserve-3d;
transform-style: preserve-3d;
-webkit-animation: rotate 5s infinite;
animation: rotate 5s infinite;
}
.cube > div {
position: absolute;
width: 100%;
height: 100%;
box-shadow: inset 0 0 15px rgba(0, 0, 0, .2);
background-color: rgba(255, 255, 255, .1);
color: gray;
font-size: 20px;
line-height: 100px;
text-align: center;
}
.front {
-webkit-transform: translatez(50px);
transform: translatez(50px);
}
.back {
-webkit-transform: rotatey(180deg) translatez(50px);
transform: rotatey(180deg) translatez(50px);
}
.right {
-webkit-transform: rotatey(90deg) translatez(50px);
transform: rotatey(90deg) translatez(50px);
}
.left {
-webkit-transform: rotatey(-90deg) translatez(50px);
transform: rotatey(-90deg) translatez(50px);
}
.top {
-webkit-transform: rotatex(90deg) translatez(50px);
transform: rotatex(90deg) translatez(50px);
}
.bottom {
-webkit-transform: rotatex(-90deg) translatez(50px);
transform: rotatex(-90deg) translatez(50px);
}
@-webkit-keyframes rotate {
from {
-webkit-transform: rotatey(0);
}
to {
-webkit-transform: rotatey(360deg);
}
}
@keyframes rotate {
from {
transform: rotatey(0);
}
to {
transform: rotatey(360deg);
}
}
.c1 > div {
-webkit-backface-visibility: visible;
backface-visibility: visible;
}
.c2 > div {
-webkit-backface-visibility: hidden;
backface-visibility: hidden;
}
</style>
</head>
<body>
<div class="cube c1">
<div class="front">1</div>
<div class="back">2</div>
<div class="right">3</div>
<div class="left">4</div>
<div class="top">5</div>
<div class="bottom">6</div>
</div>

<div class="cube c2">
<div class="front">1</div>
<div class="back">2</div>
<div class="right">3</div>
<div class="left">4</div>
<div class="top">5</div>
<div class="bottom">6</div>
</div>
</body>
</html>

转载于:https://www.cnblogs.com/y-lin/p/5803518.html

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/457352.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

8数据提供什么掩膜产品_博硕能为你提供什么产品?

自动喷漆设备应用于线条、木门、橱柜、楼梯、套房家具、办公家具、木饰面板、外墙保温装饰一体板板等产品领域&#xff0c;针对NC、PU、UV、水性漆和氟碳漆等不同种类的油漆&#xff0c;进行自动化喷涂和干燥作业。自动喷漆设备有多种规格型号&#xff0c;分为不同的喷涂方式。…

python3 实现对比conf 文件差异

用法&#xff1a; ./conf.py nginx1.conf nginx2.conf > diff.htmlconf.py#!/usr/bin/python import difflib import sys #### Usage: compare_nginx.conf.py filename1 filename2 >diff.html try:textfile1 sys.argv[1]textfile2 sys.argv[2] except Exception as…

mysql----innodb统计信息

对innodb 统计信息的控制可以通过如下几个常用的variables 来实现 1、innodb_stats_persistent&#xff1a; 这个参数控制着innodb的统计信息是否持久化到磁盘&#xff0c;先说明一下持久化到磁盘是什么意思&#xff1b;通常来说统计信息只保存在内存中&#xff0c;也就是说如果…

linux pid t 头文件_linux系统调用相关头文件

Linux C 一些函数 所属的头文件 2011-03-07 10:25:07分类&#xff1a; LINUX在编写程序时&#xff0c;有时总是不记得所使用的函数在哪个库函数中。现在先把自己以前经常用到的函数头文件总结一下。 有不对的地方还请指教。1&#xff0c;系统调用 文件的操作函数#inlclude &…

jsp页面验证码(完整实例)

项目结构如下&#xff0c;MyEclipse中新建一个Web Project&#xff0c;取名servlet 1、src下new一个servlet类 package com.servlet;import java.awt.Color; import java.awt.Font; import java.awt.Graphics2D; import java.awt.image.BufferedImage; import java.io.IOExcept…

开源oa_圈子哥推荐一款基于 Spring Boot 开发 OA 开源产品,学习/搞外快都是不二选择!...

点击上方蓝字关注「程序员的技术圈子」今天圈子哥给大家推荐一套Spring Boot 开发 OA系统&#xff0c;系统功能齐全&#xff0c;不管是用来学习或者搞外快都是不错的选择&#xff0c;clone下来吧&#xff01;办公自动化(OA)是面向组织的日常运作和管理&#xff0c;员工及管理者…

iOS网络编程实践--NSStream实现TCP Socket iPhone客户端

客户端我们使用iPhone应用程序&#xff0c;画面比较简单。点击发送按钮&#xff0c;给服务器发送一些字符串过去。点击接收按钮就会从服务器读取一些字符串&#xff0c;并且显示在画面上。 有关客户端应用的UI部分不再介绍了&#xff0c;我们直接看代码部分&#xff0c;Socket客…

Mocha 和 Chai 入门初探

转载自楼主个人博客 Mocha 和 Chai 入门初探Chai 在和 jest 作比较的时候, 两者主要的不同就是 jest 的集成度比较高内置断言库, 而 mocha 需要搭配额外的断言库, 在此选择了比较流行的 chai 作为断言库. 风格的选择 其中 chai 又有好几种断言风格, 我们经常见到的其实就是 BDD…

ios把数据传递到另一个页面_IOS 应用之间的跳转和数据传递详解

说明&#xff1a;本文介绍app如何打开另一个app,并且传递数据。一、简单说明新建两个应用&#xff0c;分别为应用A和应用B.实现要求:在appA的页面中点击对应的按钮&#xff0c;能够打开appB这个应用。1.新建两个应用&#xff0c;分别为A和B.142354418874108[1].png150002248248…

Libevent初探

Libevent 是一个用C语言编写的、轻量级的开源高性能网络库&#xff0c;主要有以下几个亮点&#xff1a;事件驱动&#xff08; event-driven&#xff09;&#xff0c;高性能;轻量级&#xff0c;专注于网络&#xff0c;不如 ACE 那么臃肿庞大&#xff1b;源代码相当精炼、易读&am…

ServerSocketChannel API用法

java.nio.channels 类 ServerSocketChannel java.lang.Objectjava.nio.channels.spi.AbstractInterruptibleChanneljava.nio.channels.SelectableChanneljava.nio.channels.spi.AbstractSelectableChanneljava.nio.channels.ServerSocketChannel所有已实现的接口&#xff1a; C…

jq分页 不刷新页面_jQuery无刷新分页完整实例代码

本文实例讲述了jQuery无刷新分页实现方法。分享给大家供大家参考&#xff0c;具体如下&#xff1a;这款jQuery分页示例&#xff0c;是分页经典形式&#xff0c;兼容性也做的好&#xff0c;网页上的分页代码&#xff0c;分享给大家。运行效果截图如下&#xff1a;在线演示地址如…

为什么要写年终总结

2016只剩下不到百分之一的时间了&#xff0c;网上陆续看到各种企业或个人的总结或盘点&#xff0c;公司也必须规定每个员工要做年度工作总结&#xff0c;或许是环境释然&#xff0c;心里也有无数次要做总结的念头&#xff0c;尤其是月末年末这种感觉更重&#xff0c;但却没静下…

特别慢_背什么都特别慢,该怎么提高记忆力?

考研是一项全方位的比拼&#xff0c;除了每天进行知识点的复习&#xff0c;还要做题、总结&#xff0c;最后还得进行背诵记忆&#xff0c;其实什么科目都需要背的&#xff0c;就算数学&#xff0c;该记的概念和公式也是要记忆的&#xff0c;因为会做题更快&#xff0c;提高效率…

tiny4412u-boot烧写及根文件系统制作(不进入终端问题)

http://m.blog.csdn.net/article/details?id51400196&#xff08;转&#xff09; VMware12 环境&#xff1a;ubuntu12.4 开发板&#xff1a;tiny4412 首先烧写bootloader&#xff0c;我用一个8G的内存卡&#xff0c;现在不说sd卡的制作过程了&#xff0c;网上可以参考。 现在就…

第三章 中间件,3.1 万亿级数据洪峰下的分布式消息引擎(作者:冯嘉、誓嘉、尘央、牟羽)...

3.1 万亿级数据洪峰下的分布式消息引擎 前言 通过简单回顾阿里中间件(Aliware)消息引擎的发展史&#xff0c;本文开篇于双11消息引擎面临的低延迟挑战&#xff0c;通过经典的应用场景阐述可能会面临的问题 - 响应慢&#xff0c;雪崩&#xff0c;用户体验差&#xff0c;继而交易…

Linux目录结构和常用命令

一、Linux目录结构 你想知道为什么某些程序位于/bin下&#xff0c;或者/sbin&#xff0c;或者/usr/bin&#xff0c;或/usr/sbin目录下吗&#xff1f;例如&#xff0c;less命令位于/usr/bin目录下。为什么没在/bin中&#xff0c;或/sbin&#xff0c;或/usr/sbin目录中&#xff1…

挂载nfs文件系统_综合架构-day38-NFS服务补充

1.如何让nfs永久挂载-2种方法开机自启动文件1.vim /etc/rc.d/rc.local需要修改执行权限chmod x /etc/rc.d/rc/localmount -t nfs 172.16.1.31:/upload/ /mnt/2.vim /etc/fstab172.16.1.31:/upload /mnt nfs defaults 0 02.exportfs 加载配置生效&#xff0c;等价于优雅重启[15:…

A Neural Algorithm of Artistic Style

本系列文章由 yhl_leo 出品&#xff0c;转载请注明出处。 文章链接&#xff1a; http://blog.csdn.net/yhl_leo/article/details/53931536 1. 资源 Paper: A Neural Algorithm of Artistic StyleTensorFlow version in GitHub: anishathalye/neural-styleCaffe version in GitH…

CSS布局奇淫技巧之--各种居中

居中是我们使用css来布局时常遇到的情况。使用css来进行居中时&#xff0c;有时一个属性就能搞定&#xff0c;有时则需要一定的技巧才能兼容到所有浏览器&#xff0c;本文就居中的一些常用方法做个简单的介绍。 注&#xff1a;本文所讲方法除了特别说明外&#xff0c;都是兼容I…