transform

CSS总结

醉酒当歌 提交于 2020-01-26 08:19:55
CSS的简介: 1、CSS的定义:层叠样式表。属性和属性值用冒号分隔开,以分号结尾(这些符号都是英文的)。 2、CSS得引入方式: 行内引入:<div style="这里写样式">我是一个块级的标签</div> 嵌入式:将CSS样式表放到head中用<style>标签包裹起来 <head> ... <style type="text/css"> ...此处写CSS样式 </style> </head> 导入式: 将一个独立的.css文件引入HTML文件中,导入式使用@import 引入外部CSS文件,<style>标记也是写在<head>标记中。 导入式会在整个网页装载完后再装载CSS文件。 <head> ... <style type="text/css"> @import "My.css"; 此处注意.css文件的路径 </style> </head> 链接式引入:将一个独立的.css文件引入到HTML文件中,使用<link>标记写在<head>标记中。 链接式会以网页文件主体装载前装载CSS文件。 <head> ... <link href="My.css" rel="stylesheet" type="text/css"> </head> 3、样式的应用顺序: 行内样式优先级最高 针对相同的样式属性,不同的样式属性将以合并的方式呈现 相同样式并且相同属性,呈现方式在

XSLT Transformating XML to XML

一笑奈何 提交于 2020-01-25 16:17:45
问题 I have the problem with xslt. How to exactly use template to build output like this? I get tired already a long time with this, and it is problematic to use a tag xmlns <?xml version="1.0" encoding="utf-8"?> <books xmlns="http://example.net/books/1.0" xmlns:a="http://example.net/author/1.0"> <book> <a:author> <a:name>John</a:name> <a:surname>Applesed</a:surname> </a:author> <title>Missing opportunity</title> </book> <book> <a:author> <a:name>Paul</a:name> <a:surname>Morgan</a:surname> </a

Babel指南——基本环境搭建

旧时模样 提交于 2020-01-25 11:51:31
ECMAScript的现状 ECMAScript,本身是一个脚本语言的设计规范,基于此规范,有许多为人熟知的语言,如JavaScript、ActionScript等。而时至几年前,随着Node.js的出现,以及HTML5带来的诸多新WebAPI,让JavaScript一下子提升到一个无比重要的位置。时至那个阶段,我们可以统称当时为ECMAScript5(ES5)。 那之后,很快就开始了对ECMAScript 2015(ES6)的制定,ES6一洗JS过去诸多的奇淫巧技、含糊不清的地方,带入了很多现代编程语言的特性,而且其推行的速度远比HTML5和CSS3要快。而在今天讨论ES6的时候,实际上ECMAScript 2016(ES7)已经在制定中(目前其实主要是修正和弥补ES6的不足),很多已经可以使用在实际生产环境中。 然而如上所述,即使是ES6,仍然有许多不足之处,所以急匆匆的ES7上线了,纵然你在使用ES6了,但是以今天的技术发展速度来说,既然ES7有了修正案,尽早的切入到ES7才能跟得上时代的步伐。 而JavaScript是一门需要环境依托运行的语言,无论是Browser环境下,还是服务器环境下,都需要环境的支持。下面这个列表,可以看到你的浏览器,和当前市面可支持JavaScript环境对ES6的支持情况: https://kangax.github.io/compat

css3 3d变换和动画——回顾

≯℡__Kan透↙ 提交于 2020-01-25 07:42:57
1.transform-style 属性指定嵌套原始是怎样在三维空间中呈现。   语法:transform-style: flat | preserve-3d       flat 表示所有子元素在2D平面呈现。       preserve-3d 表示所在元素在3D空间中呈现。 2.perspective 定义3D元素距视图的距离,以像素计,当为元素定义perspective 属性时,其子元素获得透视效果,而不是元素本身   语法:perspective: number | none;       number 元素距离视图的距离,以像素计。       none 默认值,与0 相同,不设置透明。 3.perspective-origin 属性定义3D元素所基于的X轴和Y轴,该属性允许您改变3D 元素的底部位置,定义的这个属性,它是一个元素的子元素,透视图,而不是元素本身。   语法:perspective-origin: x-axis y-axis     x-axis 定义该视图在x轴上的位置。     y-axis 定义该视图在y轴上的位置。 示例:   <style>     .box{width:60px;height:60px;padding:40px;border:2px solid #000;margin:30px auto; -webkit-transform

css3 2d/3d变换重点属性详解

为君一笑 提交于 2020-01-25 03:38:54
css3 2d/3d变换——实现超炫的特效 声明:所有结论都是经过实际代码运行的效果证实的,如果有不同的情况发生,请核对浏览器版本以及内核(360浏览器,webkit内核)是否与本人试验的时候一致,同时非常感觉读者阅读本文,如有错误之处,欢迎大家留言指出。 css3的2d/3d变换是一个很强大的功能,以前想要做到图片的倾斜或者旋转某个角度,都无法简单的做到,更别说3d效果的实现,这里的3d效果其实也是一种2d变换之后给人的一种视觉欺骗达到的,浏览器这个“平面”客户端确实无法做到真正的3d效果,现在css3就给我们提供了一种简单的方法来做到2d/3d效果。下面我给大家分享一下我的学习心得。 一、坐标轴和参考点(旋转基点) 1、参考点(旋转基点) 相信大家对于参考点这个概念并不会陌生,见名知意的一个词语,css的参考点就是元素所围绕其旋转的点,在css中用一个属性设置旋转基点,如下所示: transform-origin: left top; // 设置该元素的旋转基点为该元素的左上角 transform-origin 属性是css变换的一个重要的属性,一般需要设置2个值: 第一个值为偏移x轴方向的距离,可以用关键字left|right|center或者百分比以及具体的距离值描述。 第二个值为偏移y轴方向的距离,可以用关键字top|bottom

css3实现时钟效果

天大地大妈咪最大 提交于 2020-01-25 02:31:48
css3实现时钟效果 <div class="clock"> <div class="line line1"></div> <div class="line line2"></div> <div class="line line3"></div> <div class="line line4"></div> <div class="line line5"></div> <div class="line line6"></div> <div class="cover"></div> <div class="hour"></div> <div class="minute"></div> <div class="second"></div> <div class="center"></div> </div> * { padding : 0 ; margin : 0 ; } .clock { width : 300px ; height : 300px ; border : 10px solid #ccc ; /*border-radius: 160px;*/ /*百分比参照元素的实际宽高*/ border-radius : 50% ; margin : 100px auto ; position : relative ; } .line { width : 8px ; height :

How do I get an object to move and swap places with another object, on a mouse clic

点点圈 提交于 2020-01-24 10:44:27
问题 I have a script so far that moves an object a small distance upon a mouse click, however I want to change it so that when I click this object, it swaps places with another obejct next to it, instead of just the small distance it is moving now. I am a little confused on how to do this, because I am new to unity. using UnityEngine; using System.Collections; public class NewBehaviourScript: MonoBehaviour { public float movementSpeed = 10; void Update(){ if ( Input.GetMouseButtonDown(0)) {

[css]我要用css画幅画(四)

混江龙づ霸主 提交于 2020-01-24 05:19:47
接着之前的 [css]我要用css画幅画(二) , 今天,我画了一个小人,他的名字暂时叫作小明。 以下只列出本次修改增加的内容 html如下: 1 <div class="human left-190 bottom-25"> 2 <p class="lines">大家好,我叫小明</p> 3 <div class="human-head-normal"></div> 4 <div class="human-body-normal"></div> 5 <div class="human-arms-normal"></div> 6 <div class="human-legs-normal"></div> 7 </div> human css如下: 1 .left-190 { 2 left: 190px; 3 } 4 5 .bottom-25 { 6 bottom: 25px; 7 } 8 9 .human { 10 height:170px; 11 width: 120px; 12 13 position: absolute; 14 } 15 16 .lines { 17 position: absolute; 18 top: -20px; 19 width: 220px; 20 display: block; 21 } 22 23 .human-head-normal { 24

用css3实现各种图标效果

十年热恋 提交于 2020-01-24 05:04:31
原文: 用css3实现各种图标效果 公共样式 应该说现在绝大多数公司的项目前端都是一团乱,不仅仅是js写的没有任何框架而言,css同样也是如此,导致项目如果要升级或者说有新的变更维护起来就特别困难。 最近领导决定花大时间整理一下css样式,用他的一句话来说就是为后来者造福。 首先我们在整理样式之前,必须得有一个自己团队的规范。 思考真的很重要,所谓的磨刀不误砍柴工,事实上也就是说你在做任何事情之前都要把大致的流程,大致的思路想清楚之后再动手,否则就可能做到一半发现这样不对,然后前面的工夫全白费了,这样启不是。。。 前面说了一堆费话,下面就简单点来介绍一下我整理的图标(全部用css来实现的)。 css没有继承、多态等,所以为了write less ,do more就不得不想尽各种方法(我们自己规定凡是公共的、组件级别的样式全部以u-开头)。 我这里因为写所有标签的样式名都是以u-icon开头,所以写了如下样式,这样的话所有的以u-icon开头的全部都应用了如下三个样式,你想如果你有100个u-icon的样式那就省去了你300行代码呀! [class^="u-icon"] { display: inline-block; color: #fff; vertical-align: middle; } 手机上的切换标签 css样式代码: /*手机上的切换标签*/ .u-icon

用css3实现各种图标效果(2)

不想你离开。 提交于 2020-01-24 05:03:55
原文: 用css3实现各种图标效果(2) 写在前面 写的一模一样的css样式,结果却导致原来出来不一样的效果图。 用chrome的开发者工具查看,比较起来还是一模一样的css样式,可为什么会出现不一样的placeholder效果呢?一个白色粗体,一个灰色正常字体。 找了老半天找不到原因 后来才发现是我同事写的框架css里面代码的一句话影响到了 ::-webkit-input-placeholder { color: #a4afc6; } 可是为什么在chrome控制台看不到这句代码呢?请教了一番同事,原来是这样的。 1、点击控制台“设置”按钮 2、按如下所示设置,选中“Show user agent shadow DOM” 3、你就会在elements控制面板里面能看到如下所示 回归正题,继续我的css各种图标。。。。 当然在开始之前,还是加上如下这段公共样式吧! [class^="u-icon"] { display: inline-block; color: #fff; vertical-align: middle; } 各种删除按钮(不用图标只能css来实现) html代码如下: <span class="u-icon-radioDelete"></span> <span class="u-icon-deleteToggle Orange"> <span class="u