微信小程序样式旋转
相关文档:http://www.w3school.com.cn/cssref/pr_transform.asp
index.wxss文件
注意:如果是web前端,要注意浏览器的兼容性
.x1{
width: 46rpx;//元素的宽
height: 40rpx;//元素的高
top: 82rpx;//元素距离顶部的距离
left:315rpx;//元素距离左边的距离
transform-origin:50% 50%;//设置元素旋转的基本点
position: absolute;
transform: rotate(30deg);//30是元素旋转的度数
}
.x2{
width: 46rpx;
height: 40rpx;
top: 130rpx;
left:365rpx;
transform-origin:50% 50%;
position: absolute;
transform: rotate(60deg);
}
.x3{
width: 46rpx;
height: 40rpx;
top: 190rpx;
left:384rpx;
transform-origin:50% 50%;
position: absolute;
transform: rotate(90deg);
}
.x4{
width: 46rpx;
height: 40rpx;
top: 259rpx;
left:365rpx;
transform-origin:50% 50%;
position: absolute;
transform: rotate(120deg);
}
.x5{
width: 46rpx;
height: 40rpx;
top: 308rpx;
left:315rpx;
transform-origin:50% 50%;
position: absolute;
transform: rotate(150deg);
}
.x6{
width: 46rpx;
height: 40rpx;
top: 321rpx;
left:256rpx;
transform-origin:50% 50%;
position: absolute;
transform: rotate(180deg);
}
.x7{
width: 46rpx;
height: 40rpx;
top: 308rpx;
left:198rpx;
transform-origin:50% 50%;
position: absolute;
transform: rotate(210deg);
}
.x8{
width: 46rpx;
height: 40rpx;
top: 259rpx;
left:147rpx;
transform-origin:50% 50%;
position: absolute;
transform: rotate(240deg);
}
.x9{
width: 46rpx;
height: 40rpx;
top: 190rpx;
left:129rpx;
transform-origin:50% 50%;
position: absolute;
transform: rotate(270deg);
}
.x10{
width: 46rpx;
height: 40rpx;
top: 130rpx;
left:147rpx;
transform-origin:50% 50%;
position: absolute;
transform: rotate(300deg);
}
.x11{
width: 46rpx;
height: 40rpx;
top: 82rpx;
left:188rpx;
transform-origin:50% 50%;
position: absolute;
transform: rotate(330deg);
} .viewblockzzround{
position: absolute;
height: 245rpx;
width: 246rpx;
top: 120rpx;
left: 156rpx
}
.blockzzround{
width:100%;
height:100%;
}
index.wxml文件
最终效果图:
微信小程序样式旋转的更多相关文章
- 微信小程序(7)--微信小程序连续旋转动画
微信小程序连续旋转动画 https://mp.weixin.qq.com/debug/wxadoc/dev/api/api-animation.html <view animation=&quo ...
- 微信小程序学习笔记(1)-微信小程序样式设置逻辑
1.微信小程序的样式设置统一在每一页的.wxss的样式文件中,所有的样式设置代码统一写入这个文件中: 2.样式主要是通过.wxml里面控件的“class”属性来调用,此处调用会有几个细节要注意: 1) ...
- 微信小程序连续旋转动画this.animation.rotate
一..js中封装旋转动画方法 添加animation属性 data:{ animation:''" } 改变animation的值(官网提供角度范围是-180~180,但是我发现角度越大会一 ...
- 微信小程序样式wxss各种问题总结(不断更新)
1)加入其它样式文件 @import '/css/dialog.wxss'; //注意:必须结尾用分号 2)隐藏滚动条 ::-webkit-scrollbar { width:; height:; c ...
- 微信小程序 教程及示例
作者:初雪链接:https://www.zhihu.com/question/50907897/answer/128494332来源:知乎著作权归作者所有,转载请联系作者获得授权.微信小程序正式公测, ...
- 微信小程序初使心得【微信小程序快速入门】
摘要: 2016年推出微信小程序,时至今日,历经几个版本的更新,已形成了相对实用和稳定的服务平台.本文简单的介绍了微信小程序的入门用法,今后会继续关注和实践. 2016年推出微信小程序,时至今日,历经 ...
- 微信小程序踩坑集合
1:官方工具:https://mp.weixin.qq.com/debug/w ... tml?t=1476434678461 2:简易教程:https://mp.weixin.qq.com/debu ...
- 原创:新手布局福音!微信小程序使用flex的一些基础样式属性
来源:新手布局福音!微信小程序使用flex的一些基础样式属性 作者:Nazi Flex布局相对于以前我们经常所用到的布局方式要好的很多,在做微信小程序的时候要既能符合微信小程序的文档开发要求,又能 ...
- 微信小程序 JS动态修改样式
微信小程序这个坑啊,js动态修改样式,我们并不能用js或者jq 轻轻松松一行代码搞定.或者用removeClass addClass 来修改样式. 以下是一种动态修改样式的方法,原理是绑定数据,然后动 ...
随机推荐
- C++设计模式——中介者模式
前言 我们都知道,这个国际政治是一门很深的学问,不玩政治的人是搞不懂的.那么多的国家,国家之间的关系又及其复杂:就好比现在,美国和中国有经济利益关系,美国又和日本有盟友关系,朝鲜又和中国有说不清道不明 ...
- CIA402状态转换图
CIA402状态转换如下图所示: 要想改变参数并使其生效,需要先将状态转换到ready,然后修改要配置的参数,再使其运行(operation enabled). 要发送的报文顺序基本如下: 1) ...
- php 的文件操作类
<?php header('Content-type:text/html;charset=utf8'); Class FILE { private static $path; private s ...
- 阿里云学生服务器搭建网站-Ubuntu16.04安装php开发环境
阿里云学生服务器搭建网站(2)-Ubuntu16.04安装php开发环境 优秀博文:https://www.linuxidc.com/Linux/2016-10/136327.htm https:/ ...
- Spring Boot重定向的使用方法
@RequestMapping(value = "/redirect", method = RequestMethod.GET) public void redirecttest( ...
- 办公用品管理系统VB——模块
'DbFunc.bas'== 标记数据库是否连接 == Private IsConnect As Boolean '== 标记执行Connect()函数后,访问数据库的次数 == Private Co ...
- Kafka(二)CentOS7.5搭建Kafka2.11-1.1.0集群与简单测试
一.下载 下载地址: http://kafka.apache.org/downloads.html 我这里下载的是Scala 2.11对应的 kafka_2.11-1.1.0.tgz 二.kaf ...
- flume进阶
上一张初识里面谢了一些flume入门的内容,其实在真正工作环境里面这种情况使用的是很少的,大部分情况,我们可能需要从多台设备的日志里面汇总收集数据并存储到HDFS上,以便于后期对数据进行处理,真实的情 ...
- docker 安装mongo
1.docker安装参考docker官网教程 2.docker中获取mongo镜像 sudo pull mongo 3.通过run命令新建/启动容器,容器名称为mongo,本地宿主机如果27017端口 ...
- Centos6.5部署vsftpd+mysql认证
1.FTP传输原理 FTP,文件传输协议,是工作在应用层,基于TCP实现,依赖于互联网即可通讯. 1)连接模式 控制(命令)连接,用来通信,一直在线,客户端随机端口连接服务端TCP:21端口. 数据连 ...