transform

阅读更多关于 transform

transform实例： https://c.runoob.com/codedemo/3391 看了一下rotate，按照我自己的习惯总结了一下，rotatex是以x轴为旋转轴顺时针旋转，rotatey是逆时针旋转 transform-origin是确定运动按照以什么为原点或者旋转轴，transform-origin是以左上为0，0，0. x是右上transform-origin : 100% 0 0，y是左下transform-origin : 0 100% 0 不指定中心，默认元素的中心为中心旋转。 skewX(45deg)，沿x轴，x长度不变，y轴逆时针旋转拉伸45。。。 skewY(45deg)，Y长度不变，X轴顺时针旋转拉伸45。来源： CSDN 作者： newway007 链接： https://blog.csdn.net/newway007/article/details/104009712

Any faster algorithm to transform from RGB to CMYK

阅读更多关于 Any faster algorithm to transform from RGB to CMYK

问题 This is how I am doing to convert from RGB to CMYK using the more "correct" way - i.e using an ICC color profile. // Convert RGB to CMYK with level shift (minus 128) private void RGB2CMYK(int[] rgb, float[][] C, float[][] M, float[][] Y, float[][] K, int imageWidth, int imageHeight) throws Exception { ColorSpace instance = new ICC_ColorSpace(ICC_Profile.getInstance(JPEGWriter.class.getResourceAsStream(pathToCMYKProfile))); float red, green, blue, cmyk[]; // for(int i = 0, index = 0; i <

Retina屏的移动设备如何实现真正1px的线

阅读更多关于 Retina屏的移动设备如何实现真正1px的线

前些日子总被人问起 iOS Retina 屏，设置 1px 边框，实际显示 2px，如何解决？原来一直没在意，源于自己根本不是像素眼…… 今天仔细瞅了瞅原生实现的边框和CSS设置的边框，确实差距不小…… 上图是原生实现，下图是 CSS 边框，手机上对比更加明显然后，如何解决呢？搜遍整个谷歌，发现好多人早已开始研究解决方案了。到底有哪些方案，到底好不好用呢？试过才知道，把我试过的结论记录一下。有说用 0.5px 解决的在2014年的 WWDC，“设计响应的Web体验” 一讲中，Ted O’Connor 讲到关于“retina hairlines”（retina 极细的线）：在retina屏上仅仅显示1物理像素的边框，开发者应该如何处理呢。他们曾介绍到 iOS 8 和 OS X Yosemite 即将支持 0.5px 的边框：额的神呐！so easy! 果真如此吗？这样还不够（WWDC幻灯片通常是“唬人”的），但是相差不多。问题是 retina 屏的浏览器可能不认识0.5px的边框，将会把它解释成0px，没有边框。包括 iOS 7 和之前版本，OS X Mavericks 及以前版本，还有 Android 设备。解决方案解决方案是通过 JavaScript 检测浏览器能否处理0.5px的边框，如果可以，给 <html> 元素添加个 class 。 1 2 3 4

Kaggle学习笔记——Categorical Variables

阅读更多关于 Kaggle学习笔记——Categorical Variables

Kaggle学习笔记--Categorical Variables 简介数据准备步骤1：删除包含分类数据的列步骤2：标签编码步骤3：统计基数步骤4：一键编码 kaggle课程连接 https://www.kaggle.com/learn/intermediate-machine-learning . 简介本次练习介绍三种处理数据中的分类变量（即类型为object的变量）的方法。方法一、删除分类变量处理分类变量的最简单方法是从数据集中删除它们。仅当列中没有有用的信息时，此方法才能很好地工作。方法二、标签编码标签编码将每个唯一值分配给不同的整数。此方法假定以下类别的排序：“从不”（0）<“很少”（1）<“大多数日子”（2）<“每天”（3）。在本示例中，这种假设是有意义的，因为对类别的排名无可争议。并非所有类别变量的值都具有明确的顺序，但是我们将其称为序数变量。对于基于树的模型（例如决策树和随机森林），可以期望标签编码可以与序数变量一起很好地工作。方法三、一键编码一键编码会创建新列，以指示原始数据中每个可能值的存在（或不存在）。为了理解这一点，我们将通过一个示例进行研究。在原始数据集中，“颜色”是具有三个类别的类别变量：“红色”，“黄色”和“绿色”。对应的一键编码在原始数据集中包含一列用于每个可能的值，并且在每一行中包含一行。无论原始值为“红色”

如何使用CSS创建巧妙的动画提示框

阅读更多关于如何使用CSS创建巧妙的动画提示框

原文： https://webdesign.tutsplus.co... 原作： Jase Smith 翻译： Stypstive 当你的用户需要漂亮的图标给出额外的文字信息时，亦或是当他们在点击了按钮之后需要确认自己没点错时，又或是带图片和字幕的复活节彩蛋，提示框是用来增强用户界面的绝佳手段。现在，让我们来做几个动画提示框，没有别的，只有HTML和CSS。样例这是我们之后要做的： http://jsfiddle.net/kcschaefe... 在我们沉浸在写代码的过程中之前，让我们先来看看我们的意图是什么。主要目的是为了获得一种简单的添加提示框的方法，这样一来，我们之后就能够通过增加一个自定义的 tooltip 属性来做到这一点。 <span tooltip="message">visible text or icon, etc.</span> 关于可访问性和功能的记注如果你在寻找兼容508的提示框，或者需要带容器冲突侦测和/或HTML内容 vs 纯文本的智能提示框，有许多实用第三方脚本的解决方案能满足你的要求。 "用JavaScript来做完全可访问的交互组件是命令式的" - Sara Soueidan, 打造一个完全可访问的帮助提示框...比你想的要难这篇教程不会特地解决可访问性的需求。你了解你的用户，知道他们需要什么，所以有关这方面，也要记得考虑他们的需求。

实现立方体旋转

阅读更多关于实现立方体旋转

HTML部分： <body class="body"> <div class="rect-wrap">  <div class="container">  <div class="top slide">1</div>  <div class="bottom slide">2</div> <div class="left slide">3</div> <div class="right slide">4</div> <div class="front slide">5</div> <div class="back slide">6</div> </div> </div> </body> CSS: <style> .rect-wrap { position: relative; perspective: 2000px; } .container { width: 400px; height: 400px; transform-style: preserve-3d; transform-origin: 50% 50% 100px; /* /

实现立方体旋转

阅读更多关于实现立方体旋转

HTML部分： <body class="body"> <div class="rect-wrap">  <div class="container">  <div class="top slide">1</div>  <div class="bottom slide">2</div> <div class="left slide">3</div> <div class="right slide">4</div> <div class="front slide">5</div> <div class="back slide">6</div> </div> </div> </body> CSS: <style> .rect-wrap { position: relative; perspective: 2000px; } .container { width: 400px; height: 400px; transform-style: preserve-3d; transform-origin: 50% 50% 100px; /* /

HTML5+CSS3

阅读更多关于 HTML5+CSS3

cHTML5 第三天一、认识 3D 转换 3D 的特点近大远小物体和面遮挡不可见三维坐标系 x 轴：水平向右 – 注意：x 轴右边是正值，左边是负值 y 轴：垂直向下 – 注意：y 轴下面是正值，上面是负值 z 轴：垂直屏幕 – 注意：往外边的是正值，往里面的是负值二、 3D 转换 3D 转换知识要点 3D 位移： translate3d(x, y, z) 3D 旋转： rotate3d(x, y, z) 透视： perspctive 3D 呈现 transfrom-style 3D 移动 translate3d 3D 移动就是在 2D 移动的基础上多加了一个可以移动的方向，就是 z 轴方向 transform: translateX(100px) ：仅仅是在 x 轴上移动 transform: translateY(100px) ：仅仅是在 y 轴上移动 transform: translateZ(100px) ：仅仅是在 z 轴上移动 transform: translate3d(x, y, z) ：其中x、y、z 分别指要移动的轴的方向的距离注意：x, y, z 对应的值不能省略，不需要填写用 0 进行填充语法 transform : translate3d ( x, y, z ) 代码演示 transform : translate3d ( 100px,

CSS3浏览器兼容

阅读更多关于 CSS3浏览器兼容

不同的浏览器需要不同的前缀 -webkit chrome和safari -moz firefox -ms ie -o opera 　　一个炫酷标题效果： HTML： <!DOCTYPE HTML> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <title>Hello YYN</title> <link href='http://fonts.googleapis.com/css?family=Fruktur' rel='stylesheet' type='text/css'> <link href="css/new_file.css" rel="stylesheet" type="text/css"> </head> <body> <h1>Hello CSS3</h1> </body> </html> CSS: body{ background:#000; } h1 { text-align:center; color:#fff; font-size:48px; font-family: 'Fruktur', cursive; text-shadow: 1px 1px 1px #ccc, 0 0 10px #fff, 0 0 20px #fff, 0 0 30px

HTML CSS 实现鼠标悬停时图片拉近效果

阅读更多关于 HTML CSS 实现鼠标悬停时图片拉近效果

前言为了让网页的使用体验更好，我们会让网页的某些元素对鼠标的动作做出响应。例如鼠标滑过、单击按钮的时候按钮变色、变形。之前在很多网页上看到了鼠标滑过一个图片链接时图片放大、拉近的效果，今天尝试实现一下。 1. 使用background实现思路：设置以图片作为 div 元素的背景，鼠标滑过 div 的时候通过 background 属性放大图片。 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>background实现图片拉近效果</title> <style> #box { background: url(../images/img022.png); width: 720px; height: 720px; margin: 0 auto; border: 1px solid #aaa; background-color: #444; } #box:hover { background-size: 100.5% 100.5%; } </style> </head> <body> <div id='box'> </div> </body> </html> 2. 使用 img 元素的 width height 属性实现思路：当鼠标滑过图片时，修改 img 元素的 width 和 height 属性放大图片 <

订阅 transform