transform | 易学教程

淡入动画备份

阅读更多关于淡入动画备份

淡入动画 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0"> <title>Document</title> </head> <style type="text/css"> .dataDialog { position: absolute; left: 750px; bottom: 55px; width: 1580px; height: 470px; -webkit-transform: translate(0,550px); transform: translate(0,550px); opacity: 0; -webkit-transition: opacity .5s,-webkit-transform .5s; transition: opacity .5s,-webkit-transform .5s; transition: transform .5s,opacity .5s; transition: transform .5s,opacity

css 动画的例子

阅读更多关于 css 动画的例子

1. [代码] <!DOCTYPE HTML> <html> <head> <meta charset="utf-8"> <title>创建3D模型</title> <style> *{padding:0;margin:0;} li{list-style:none;} body{font-size:12px;background:#fff;font-family:'Helvetica Neue',Arial,sans-serif; -webkit-text-size-adjust: none;color:#333;} .box{margin:100px auto;width:500px;height:500px;border:5px solid #ddd;} #cube{ width:300px;height:300px;margin:100px auto; -moz-transform-style:preserve-3d; -webkit-transform-style:preserve-3d; } #cube li{ display:block;position:absolute;width:298px;height:298px;font-size:120px;line-height:298px;text-align:center;border:1px solid #333;z

CSS实现正方体旋转

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

代码如下： <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>CSS3 星空旋转正方体</title> <style type="text/css"> body{ background-image:linear-gradient(to top,blue,#000); } *{ padding: 0; margin:0; } #Mypage{ /*-webkit-perspective:600px; -webkit-perspective-origin:50% 50%;*/ -webkit-transform-style:preserve-3d; position: relative; width: 400px; height: 400px; margin:100px auto; } #Mypage li{ list-style:none; } .pages{ position: absolute; width:400px; height:400px; } #page1{ background-color: #FF0088; -webkit-transform:translateZ(200px); } #page2{ background-color: #FFFF00; -webkit

动画效果cSS

阅读更多关于动画效果cSS

鼠标移入，放大 .frame4 .uc a:hover{ transform:scale(1.1); z-index: 1; transition: transform .4s; } 鼠标移入，旋转一圈 .close:hover{ transform:rotate(360deg); transition: transform 1s; } 来源： CSDN 作者： chose_DoIt 链接： https://blog.csdn.net/chose_DoIt/article/details/104738208

CSS实现立方体

阅读更多关于 CSS实现立方体

Css制作立方体这周在逆战班学习了过渡(transition)，2D动画(transform)，渐变(gradient)，以及3D动画特效。让我能够敲出很多很炫很好看的动画特效。今天想讲一下如何制作一个立方体。首先，一个立方体需要六个面，所以我们可以用6个div放在一个大的div里，也可以用ul,li列表来制作。 < div class = "wrap" > < div class = "box1" > < / div > < div class = "box2" > < / div > < div class = "box3" > < / div > < div class = "box4" > < / div > < div class = "box5" > < / div > < div > 接下来需要添加静态样式。 .wrap { width : 500px ; height : 500px ; margin : 50px auto ; border : 1px solid pink ; position : relative ; /* 让wrap盒子变成一个3d空间 */ transform-style : preserve-3d ; } /* 给所有的子div设置同样的宽高200像素让它们都绝对定位并且在父元素中居中显示 */

vue学习总结--引入reset.css与border.css

阅读更多关于 vue学习总结--引入reset.css与border.css

1. reset.css ，初始化整体样式，去除某些标签的默认样式，比如 <li></li> 的小黑点；因为每个人用的初始化样式都有所区别，但都大同小异，所以这里我只放我目前在用的代码，大家也可以自行搜索其他开发者发布的版本 html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary, time, mark, audio,

vue列表拖拽排序功能实现

阅读更多关于 vue列表拖拽排序功能实现

1.实现目标：目标是输入一个数组，生成一个列表；通过拖拽排序，拖拽结束后输出一个经过排序的数组。 2.实现思路： 2.1是使用HTML5的drag功能来实现，每次拖拽时直接操作Dom节点排序，拖拽结束后再根据实际的dom节点遍历得出新的数组。 2.2使用mousedown,mouseover等鼠标事件来实现，每次监听事件时，仅改动列表项的样式transform，而不操作实际的dom顺序。拖拽结束时，根据transform计算数组项顺序，得出新数组用vue数据驱动的方式重绘列表，重置所有样式。总的来说就是可以通过不同的监听事件（drag、mouseover），按不同的顺序操作Dom（1.先操作实际dom，再添加动画，在输出数组；2。不操作实际dom，仅改变transfrom，得出新数组，用新数组生成新列表来更新节点）。 3.实际代码 3.1第一种实现 html部分。（被拖拽的元素需要设置draggable=true,否则不会有效果） <div id="app"> <ul @dragstart="onDragStart" @dragover="onDragOver" @dragend="onDragEnd" ref="parentNode"> <li v-for="(item,index) in data" :key="index" class="item" draggable=

线性回归两种求解方式总结

阅读更多关于线性回归两种求解方式总结

线性回归两种求解方式总结使用梯度下降进行预测 from sklearn . datasets import load_boston # 波士顿房价数据集使用API from sklearn . linear_model import LinearRegression , SGDRegressor ##回归预测时使用的API from sklearn . model_selection import train_test_split from sklearn . preprocessing import StandardScaler ## 标准化API def myLinear ( ) : """线性回归直接预测房子价格""" # 获取数据 lb = load_boston ( ) # 分割数据集 x_train , x_text , y_train , y_text = train_test_split ( lb . data , lb . target , test_size = 0.25 ) # 进行标准化处理 std_x = StandardScaler ( ) x_train = std_x . fit_transform ( x_train ) x_text = std_x . transform ( ( x_text ) ) #目标值 std_y =

【Python】学习笔记（三）：机器学习基础入门

阅读更多关于【Python】学习笔记（三）：机器学习基础入门

机器学习简介 1 机器学习 1.1 数据集数据集 = 特征值 + 目标值 1.2 算法分类监督学习目标值：类别 - 分类问题目标值：连续数据 - 回归问题无监督学习：无目标值 1.3 机器学习流程 1.4 Scikit-learn pip3 install Scikit-learn == 0.19.1 2 sklearn 特征工程 2.1 scikit-learn数据集API 2.2 数据集 2.2.1 小数据集 2.2.2 大数据集 2.2.3 返回值 # 导入鸢尾花 from sklearn . datasets import load_iris 2.2.4 数据集的划分 from sklearn . model_selection import train_test_split x_train , x_test , y_train , y_test = train_test_split ( iris . data , iris . target , test_size = 0.2 , random_state = 22 ) print ( f "测试集：{x_train}, 大小：{x_train.shape}" ) 2.3 特征工程 Feature Engineering sklearn 特征工程 pandas 数据清洗，数据处理 2.3.1 特征抽取API

3D旋转相册（纯css）

阅读更多关于 3D旋转相册（纯css）

/*--> */ /*--> */ html代码： <div class="Exhibition">　　　　　　　　　　　　　　　　　　　　//放置的容器 <div class="content">　　　　　　　　　　　　　　　　　　　　 //旋转的目标 <img class="img1" src="world.jpg"/> <img class="img2" src="world.jpg"/> <img class="img3" src="world.jpg"/> <img class="img4" src="world.jpg"/> </div> </div> css代码： .Exhibition{ perspective: 500px; //让容器有个“坑”可以展示物品 transform: rotateX(0deg); //这里可以展示看的位置！（可以没有） } .content{ margin-left: 600px; margin-top: 200px; width: 200px; height: 200px; transform-style: preserve-3d; //让里面的元素3d展示 -webkit-animation:ab 10s infinite linear ;　　　　　　　//动画/线性无限循环 -moz-animation:ab 10s

订阅 transform