css3 翻转和旋转的区别
我以前一直以为旋转跟翻转一样,今日自己旋转了好久都发觉跟翻转差一点点,纠结了十几分钟才明白,只能怪自己的立体感太差了。
css3中的transform中有旋转,放缩,倾斜,平移的功能,分别对应的属性是:rotate,scale,skew,translate
旋转:(rotate)
-webkit-transform:rotate(10deg);
-moz-transform:rotate(10deg);
transform:rotate(10deg);
/* 何问起 hovertree.com */
翻转:(scale)
(这个属性是放缩的功能,怎么能翻转的!原来括弧里面(1,1)前者表示X轴,后者表示Y轴,当数字大于1时放大,大于0并小于1时缩小,负数代表翻转)
水平翻转:
-webkit-transform:scale(-1,1);
-moz-transform:scale(-1,1);
transform:scale(-1,1);
/* 何问起 hovertree.com */
垂直翻转:
-webkit-transform:scale(1,-1);
-moz-transform:scale(1,-1);
transform:scale(1,-1);
/* 何问起 hovertree.com */
在线示例:http://hovertree.com/code/css/css3dxuanzhuan.htm
特效:http://www.cnblogs.com/roucheng/p/texiao.html
css3 翻转和旋转的区别的更多相关文章
- css3 翻转和旋转的差别
我曾经一直以为旋转跟翻转一样,今日自己旋转了好久都发觉跟翻转差一点点,纠结了十几分钟才明确,仅仅能怪自己的立体感太差了. css3中的transform中有旋转,放缩,倾斜,平移的功能,分别相应的属性 ...
- 用CSS3制作的旋转六面体动画
这是用CSS3制作的旋转的六面体 请用火狐或谷歌浏览器预览,有些旋转角度做的不够好,请大神指教 top bottom left right front back
- 纯CSS3悬停图标旋转导航动画代码
分享一款纯CSS3悬停图标旋转导航动画代码.这是一款鼠标移到图标上动画旋转显示导航菜单.效果图如下: 在线预览 源码下载 实现的代码. html代码: <div id="x_con ...
- 第102天:CSS3实现立方体旋转
CSS3实现立方体旋转 <!DOCTYPE html> <html lang="en"> <head> <meta charset=&qu ...
- CSS3选择器:nth-child与:nth-of-type区别
一.:nth-child 1.1 说明 :nth-child(n)选择器匹配属于其父元素的第N个子元素,不论元素的类型.n可以是数字.关键词或公式. 注意:如果第N个子元素与选择的元素类型不同则样式无 ...
- AS3.0 位图翻转、旋转
/* * * *-------------------------* * | *** 位图翻转.旋转 *** | * *-------------------------* * * 作 者:fengz ...
- 项目实战:Qt+Ffmpeg+OpenCV相机程序(打开摄像头、支持多种摄像头、分辨率调整、翻转、旋转、亮度调整、拍照、录像、回放图片、回放录像)
若该文为原创文章,未经允许不得转载原博主博客地址:https://blog.csdn.net/qq21497936原博主博客导航:https://blog.csdn.net/qq21497936/ar ...
- CSS3之 transform和animation区别
CSS3 有3种和动画相关的属性:transform, transition, animation.其中 transform 描述了元素静态样式.而transition 和 animation 却都能 ...
- 低调奢华 CSS3 transform-style 3D旋转
点击这里查看效果:http://keleyi.com/a/bjad/s89uo4t1.htm 效果图: CSS3 transform-style 属性 以下是代码: <!DOCTYPE html ...
随机推荐
- [译] 理解PHP内部函数的定义(给PHP开发者的PHP源码-第二部分)
文章来自:http://www.hoohack.me/2016/02/10/understanding-phps-internal-function-definitions-ch 原文:https:/ ...
- WPF +MVVM(Caliburn.Micro)项目框架
最近做了一个软件,这个软件不是网站,但是与HTML,AJAX等技术密切相关,也不是只有单纯的数据库增删改查,还涉及到线程协调,比较复杂的文本处理…… 这样的软件,用OA,ERP的框架显然是不合适的,因 ...
- JavaEE连接数据库练习
登录端 <%@ page language="java" contentType="text/html; charset=UTF-8" pageEncod ...
- ## Android 6.0 权限申请 ##
Android 6.0 权限申请 1. 以前的权限申请(sdk<23) 直接在AndroidManifest.xml中申明即可: <uses-permission android:name ...
- Atitit.数据索引 的种类以及原理实现机制 索引常用的存储结构
Atitit.数据索引 的种类以及原理实现机制 索引常用的存储结构 1. 索引的分类1 1.1. 按照存储结构划分btree,hash,bitmap,fulltext1 1.2. 索引的类型 按查找 ...
- [笔记]linux下和windows下的 创建线程函数
linux下和windows下的 创建线程函数 #ifdef __GNUC__ //Linux #include <pthread.h> #define CreateThreadEx(ti ...
- SQL注入
@org.junit.Test public void testLogin() { CardDAO cd=new CardDAO(); if(cd.dengru("' or 1 = 1--& ...
- Leetcode-83 Remove Duplicates from Sorted List
#83. Remove Duplicates from Sorted List Given a sorted linked list, delete all duplicates such that ...
- Linux服务器常用操作
Context 客户端:MacOS Terminal终端 服务器端:Linux v2.6 更新项目 进程 查看:ps -ef | grep * 杀死:kill -9 <pid> 数据库 备 ...
- 使用Event Message 对 Package 进行Troubleshoot
在SSIS Server上,发现一个Package Job运行异常,该Package处于僵死状态.从 Job Activity Monitor中看到该Job一直处于运行状态,但是,DW中没有执行任何Q ...