transform

一个简单的CSS3+js 实现3D BOX

由 醉酒当歌 提交于 2020-01-03 08:03:29
<!doctype html> <html> <head> <meta charset="UTF-8"> <title>Document</title> <style> html, body, div, span, h1, h2, h3, h4, h5, h6, p a, img, ol, ul, li { margin:0;padding:0;border:0;outline:0; } body { margin-top: 5em; text-align: center; color: #414142; background: rgb(246, 241, 232); background-image: -webkit-radial-gradient(farthest-side ellipse at center, rgba(246, 241, 232, .85) 39%, rgba(212, 204, 186, .5) 100%), url("../img/1.jpg"); background-image: -moz-radial-gradient(farthest-side ellipse at center, rgba(246, 241, 232, .85) 39%, rgba(212, 204, 186, .5) 100%), url("../img/1.jpg");

how to transform dataframe that contains list in every row of each column

由 早过忘川 提交于 2020-01-03 02:57:09
问题 I have the following dataframe which is one of the output from for loop. df = pd.DataFrame() df['Score'] = [['0-0','1-1','2-2'],['0-0','1-1','2-2']] df ['value'] =[[0.08,0.1,0.15],[0.07,0.12,0.06]] df ['Team'] = ['A','B'] I want to transform each element of list of each row to each element of a column. The following is the expected output. Can anyone help me how to transform it? Thanks, Zep 回答1: You can try of unstacking index, once after applying pd.Series on each list of dataframe df = pd

transform - (SparkStreaming算子)

由 匆匆过客 提交于 2020-01-02 23:55:49
transform 一种转换算子 应用在DStream上，可以用于执行任意的RDD到RDD的转换操作。他可以用于实现，DStream API中所没有提供的操作。 package com . shsxt . spark . scala import org . apache . spark . SparkConf import org . apache . spark . streaming . { Seconds , StreamingContext } /** * Created by BF-Lone Silver Wind on 2020-01-02 */ object transform { def main ( args : Array [ String ] ) : Unit = { val conf = new SparkConf ( ) . setMaster ( "local[2]" ) . setAppName ( "Tranform" ) val ssc = new StreamingContext ( conf , Seconds ( 5 ) ) val fileDS = ssc . socketTextStream ( "192.168.241.211" , 9999 ) val wordcountDS = fileDS . flatMap { line =

CSS3制作漂亮的照片墙

由 自作多情 提交于 2020-01-02 22:29:03
CSS3可以做动画大家肯定都是耳熟能详的了，但是大家有木有巧妙的利用这一个功能来制作一款漂亮的照片墙呢？ 那么今天我们就利用CSS3动画这一特性来一起制作漂亮的照片墙吧！ 第一部分：HTML 这里我们首先放十张图片在页面上面。（有什么靓照尽管上来哦！） <div class="content"> <img class="pic1" src="img/1.jpg" /> <img class="pic2" src="img/2.jpg" /> <img class="pic3" src="img/3.jpg" /> <img class="pic4" src="img/4.jpg" /> <img class="pic5" src="img/5.jpg" /> <img class="pic6" src="img/6.jpg" /> <img class="pic7" src="img/7.jpg" /> <img class="pic8" src="img/8.jpg" /> <img class="pic9" src="img/9.jpg" /> <img class="pic10" src="img/10.jpg" /> </div> 第二部分：CSS3 这一部分就是我们这节的重点了，如上图所示照片的位置各不相同，我们肯定会用到CSS3一下的知识点： CSS3的旋转

在界面中生成头像

由 爱⌒轻易说出口 提交于 2020-01-02 20:59:26
在界面中如何生成头像？ 示例 HTML CSS 示例 HTML < div class = " container " > < div class = " avatar avatar--green " > < div class = " avatar-body body--green " > < div class = " avatar-eye eye--left " > < div class = " avatar-eye-pupil pupil--purple " > < span class = " avatar-eye-pupil-blackThing " > < span class = " avatar-eye-pupil-lightReflection " > </ span > </ span > </ div > </ div > < div class = " avatar-eye eye--right " > < div class = " avatar-eye-pupil pupil--purple " > < span class = " avatar-eye-pupil-blackThing " > < span class = " avatar-eye-pupil-lightReflection " > </ span > </ span > </

Using transform() and calc() in firefox

由 回眸只為那壹抹淺笑 提交于 2020-01-02 08:02:01
问题 Am I missing something obvious, or does firefox not like using calc() inside transform:skewY() ? The problem the following transform works, no problem : body article { postion:relative; top:50%; transform-origin:left; transform:skewY(-15deg) translateY(-50%); } however trying to use calc() doesn't. Not in firefox in any rate, although chrome renders the skew() as expected : body article { postion:relative; top:50%; transform-origin:left; transform:skewY(calc(-1rad * 3.14 / 12)) translateY(-50

transform:scale() breaking my z-index order

由 岁酱吖の 提交于 2020-01-02 06:23:28
问题 I did setup an HTML page where I use z-index to set the elements "visual" order. It works as expected; but breaks when I use transform: scale() . #blocks-both{ transform: scale(0.9); } I make a simplified example here : http://codepen.io/anon/pen/LNYrar I read a lot of messages regarding this particular problem, but I can't find a solution to make my design work. I guess I don't understand something regarding this. Could someone help ? Thanks ! 回答1: This is a known issue: css z-index lost

Getting new position of a line after rotation

由 穿精又带淫゛_ 提交于 2020-01-02 05:06:06
问题 I need to find out new coordinates of line after rotation using RotateTransform method on a line. For example, after this line: line.RenderTransform = new RotateTransform(25, 0, 0); line.X1 and the three other properties don't change. I have found some solution for shapes like rectangular, but it doesn't work for line. Line has different way how to treat with it. EDIT: Thanks for your help H.B. The second way is exactly what I've been looking for. SOLUTION: Line line = new Line(); line.X1 =

Can i use Calc inside Transform:Scale function in CSS?

由 限于喜欢 提交于 2020-01-02 04:58:07
问题 I'm trying to calculate the right scale to apply to children inside a parent but i can't use calc() inside transform: scale CSS function. I've done this function with javascript but i'm interested in a pure CSS solution to avoid bloating the page with scripts as much as possible. Example: CSS .anyclass{ height:250px; /*this value can change dinamically */ transform:scale(calc(100% / 490 )); /*is using height value*/ } This definition gives back an invalid property value. Other uses like

SVG rotate text with % as Unit

由 醉酒当歌 提交于 2020-01-02 04:45:27
问题 I try to rotate a svg text. i get the position of the text as % i.e. 15% by calling a php function from xslt. the problem is that i can not rotate a svg object using %. it works if i use a digit number instead. Below i present the problem as simplified: <?xml version="1.0"?> <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns:ev="http://ww.w3.org/2001/xml-events" xmlns:php="http://php.net/xsl" version="1.1" baseProfile="full"> <text x="50%" y="50%"
订阅 transform